Prerequisites

CSS Display Types

 

Intro

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 display flex)!

All these properties—except Flex—are set on the container element.

Interactive Demo

Before diving into all the properties, try Flexbox Froggy to get a more interactive visualization of what you can do with flexbox.

Flex Direction

The Flex Direction property controls the core layout of flex items. There are four valid values, with the default value being row.

row

Spreads flex items in a row in the order they appear in the Element Column.

row-reverse

Spreads flex items in a row in the reverse order they appear in the Elements Column.

column

Spreads flex items in a column in the order they appear in the Elements Column.

column-reverse

Spreads items in a column in the reverse order they appear in the Elements Column.

Justify Content

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.

 

flex-start

Items will be arranged from the beginning of the flex container (left for row, top for column).

flex-end

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.

center

Items will be arranged in the center of the flex container based on the flex-direction.

space-bewteen

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.

space-around

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.

space-evenly

Items are spaced such that the space between items and the edges of the containing element are equal.

Align Items

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.

stretch

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.

flex-start

Items will be placed at the beginning of the flex container.

flex-end

Items will be placed at the ending of the flex container.

center

Items will be centered along the cross-axis, perpendicular to the flex-direction.

Flex Wrap

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.

nowrap

Items will be on one line, even if the container is not large enough to contain them all.

wrap

Items will wrap to a new line based on the container size.

wrap-reverse

Items will wrap backward, starting at the end of the container.

Flex

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 display flex!

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.

Flex Grow

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.