Flexbox, or the Flexible Box Layout, is a powerful CSS layout module that gives web designers and developers an efficient and simple way to lay out, align and distribute elements in a container. It solves many layout problems we have been struggling to solve for a long time.
Flexbox basics
In its most basic form, flexbox is made up of two elements: a flex container (or flex parent) and flex items (flex children). A flex container is a containing element (like a div) given the display property flex. Flex items are child elements of a flex container, which can be manipulated through various display properties.
Flex containers and flex items each have their own range of properties that can be combined in different ways to create a range of complex layouts. Items inside a flex container can be laid out horizontally or vertically, aligned and distributed in various ways, and stretched or shrunk to fit the available space. All these options let you easily create responsive layouts.
How to use flexbox
To start using flexbox, you need to first create your flex container (the parent element that will contain your flex items). In this example, we’ll use a div block. Before we style the element, let’s add three more div blocks inside our flex container to act as the flex items. At this point, the items will be stacked.
With our child divs in place, we can set the parent container’s display property to flex.
Flex Container {
display: flex;
}
Layout directions
The layout direction is simply the direction your elements will distribute themselves. The default direction of a flex container is row, which will display the child elements horizontally. You can switch the layout to vertical by setting the direction to column.
Flex Container {
display: flex;
flex-direction: row;
}
Flex Container {
display: flex;
flex-direction: column;
}
Whichever direction you set on your flex container is referred to as its ‘main’ direction, while the other direction you didn’t choose becomes the ‘cross’ direction. Thus, by default, the main direction will be horizontal and the cross direction will be vertical.
Flexbox also lets you reverse the layout. When reversed, children of a flex container will be laid out right-to-left (if direction is row) or bottom-to-top (if direction is column ).
Flex Container {
display: flex;
flex-direction: row-reverse;
}
Flex Container {
display: flex;
flex-direction: column-reverse;
}
This can come in handy if you want to reverse the layout on smaller screens.
For example, let’s say on desktop screens you want to display text on the left side of the screen and an image on the right (see surfboard image above). On mobile, this would move the image below the text. By reversing the direction, you can ensure that the image appears above the text instead.
Adjust alignment
Flexbox’s settings also give you two different methods for aligning content: vertically and horizontally. Here are your horizontal alignment options for items inside a flex container:
flex-start: Items set toward the start of the row (left, unless you’ve reversed the layout)
center: Items centred within the row
flex-end: Items set towards the end of the row (right, unless you’ve reversed the layout)
space-between: Items evenly distributed along the row
space-around: Items evenly distributed along the row, with equal space on either side of each element
So the code might look like this:
Flex Container {
display: flex;
flex-direction: row;
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
Here are your vertical alignment options for items in a flex container:
flex-start: Items aligned to the top of the row
center: Items are centred within the row
flex-end: Items aligned to the bottom of the row
stretch: Items stretched across the height of the row
baseline: Items aligned to their baselines (the imaginary line that text sits on)
The code might look like this:
Flex Container {
display: flex;
flex-direction: row;
align-items: flex-start | flex-end | center | baseline | stretch;
}
By default, a flex container’s children will always try to fit on a single line. If you want to change this, you can add the wrap attribute. This allows children to wrap to a new line if they run out of space.
Flex Container {
display: flex;
flex-wrap: wrap;
}
Flex items also get their own flex-based properties. When an element is placed inside a flex container, it automatically becomes a flex child, and is granted its own set of flex-based CSS styles. These styles control sizing, alignment, and display order.
Flex sizing
Flex children can alter their width or height (depending on the container’s layout direction) to fill available space.
Webflow gives you three preset options for flex sizing: shrink if needed, fill empty space, and don’t shrink. Note that each child element can have its own settings, which allows for a plethora of design options.
Flex Item {
flex-shrink: <number>;
flex-grow: <number>;
flex-basis: <length> | auto;
}
Let’s take a look at what each of these options does:
- Shrink if needed: Sizes the item based on its width/height or its content. The item won’t grow larger than it needs to, but may shrink to its minimum size to prevent overflow
- Fill empty space: Allows the item to expand to fill all available space inside its parent. If you set this on all items in a flex container, they’ll expand to take up equal amounts of empty space
- Don’t shrink: Sizes the item based on its width/height or its content, but doesn’t allow it to shrink, even if that will cause overflow
Flex items can also have their own alignment settings, which override the default alignment set by their parent flex container. These alignments behave as explained previously.
Flex Item {
display: flex;
flex-direction: row;
align-items: flex-start | flex-end | center | baseline | stretch;
}
By default, flex items display in the same order as they appear in the source code. With flexbox, you can override this behaviour to ensure elements display in exactly the order you want.
The are four main options you can use here:
- Auto: The default value, which orders items as they are in the source
- First: Item appears first in its flex container
- Last: Item appears last in its flex container
- Custom: You can customise the order your item will be displayed in
Custom order can be defined as a number, which specifies the order in which the flex item appears inside a flex container.
Flex Item {
order: <integer>;
}
Why should I use it?
I’m glad you asked! Using flexbox allows you to easily create responsive layouts that were once very difficult (or impossible) to create with older CSS layout modules.
Take a look at the examples in the image below – many of which you’ve probably already seen across the web. Almost all of them would take a considerable amount of CSS (especially across different screen sizes), but only take a few simple lines to achieve with flexbox. To see these examples in action, visit flexbox.webflow.com.
