Creating layouts and positioning elements is a key skill to have when building websites. Luckily, using Flexboxes makes this easy to achieve.
A flexbox is a containing element that has a display set to
flex. Doing this converts the container's children into flex items.
We use a flexbox to layout child elements in rows or columns.
We control how flex items are positioned by setting additional properties on the flex container. These main properties are Flex Direction, Justify Content, Align Items, Flex Wrap, and Flex (not to get confused with
All these properties—except
Flex—are set on the container element.
Before diving into all the properties, try Flexbox Froggy to get a more interactive visualization of what you can do with flexbox.
The Flex Direction property controls the core layout of flex items. There are four valid values, with the default value being
Spreads flex items in a row in the order they appear in the Element Column.
Spreads flex items in a row in the reverse order they appear in the Elements Column.
Spreads flex items in a column in the order they appear in the Elements Column.
Spreads items in a column in the reverse order they appear in the Elements Column.
This property controls how the flex items are spaced along the main axis. The main axis depends on the value we put for the Flex Direction property—either horizontally or vertically.
There are six values for Justify Content.
Items will be arranged from the beginning of the flex container (left for row, top for column).
Items will be arranged from the end of the flex container (right for row, bottom for column).
Note: If the flex container is set to column and doesn't have a height specified, it will look the same as flex-start. If the container element is larger than the flex items' content, the boxes will be tied to the bottom of the container.
Items will be arranged in the center of the flex container based on the flex-direction.
Items are spaced such that the first and last item in the row/column is on each end of the flex container. The space in between items is then distributed equally.
Items are spaced with equal space between them. The space is distributed on both sides of the item, so there will be space between the walls of the container and the first/last flex item.
Items are spaced such that the space between items and the edges of the containing element are equal.
The Align Items property controls how flex items are aligned perpendicular to the main axis (row or column). This property helps align items, especially when the sizes of each item are different.
There are four main ones that we will often use. In the following examples, there is no value for Justify Content, only for Align Items.
Note: there are some values for Align Items with the same name as values for Justify Content. They do subtly different things.
This is the default value for flex containers, but you can specify it if you wish. It will stretch each item to take up the full vertical or horizontal space, depending on the container's flex direction.
Items will be placed at the beginning of the flex container.
Items will be placed at the ending of the flex container.
Items will be centered along the cross-axis, perpendicular to the flex-direction.
The default Flex Wrap behavior is to try to fit all items into one line. This property determines if the row or column will overflow from its flex container or start a new row/column if the flex items cannot fit within the container.
There are three properties.
Items will be on one line, even if the container is not large enough to contain them all.
Items will wrap to a new line based on the container size.
Items will wrap backward, starting at the end of the container.
This property is actually a shorthand for three properties: Flex Grow, Flex Shrink, and Flex Basis. This makes the Flex property a little more complex. Don't get it confused with
The Flex property is defined on the flex item, not the flex container.
The value for the Flex property will have three parts, each separated by a space. An example value is
1 1 auto, meaning the Flex Grow is 1, Flex Shrink is 1, and Flex Basis is auto.
This controls how, if at all, the flex item will grow. It determines how much space inside the flex container the item should take up. The value is a unitless number.
In the example below, the first two boxes have a Flex of
1, the third box has a flex of
2, and the last box has a Flex of
3. This sizes the boxes as ratios 1:1:2:3 within the container.
Usually, you'll only need to set the Flex Grow (first value) of the Flex property if you want to have more control over how large items are.
Flex Shrink and Flex Basis
These two properties are more situational, so we can usually get away without setting them.
If you want to learn about them, and a few more advanced flex properties, check out this flexbox cheat sheet by CSS Tricks.