Flexbox

Flexbox is a powerful, flexible CSS system for arranging items in a single line / along a single axis. This article only covers the very basics of flexbox. You may want to research more advanced properties and techniques on your own.

Activating Flexbox

Flexbox is activated for a group of elements by applying display: flex; to the direct parent of the elements to be placed in a row. A good mnemonic for remembering that flex properties are applied to the direct parent is:

Parents keep their children in line (pun intended). They aren't responsible for grandchildren or other decendants.

So let's look at some code. If we start with a series of elements within a shared parent:

We can apply display: flex; to the parent div, and its direct children are automatically arranged in a left-justified horizontal line, according to flexbox defaults:

Notice that the list items still stack on top of one another. This is because they are not direct children of the div that has been set to flex.

Flex Direction

As mentioned above, by default, flex-children are arranged in a horizontal row, but we can use the flex-direction property on the flex-parent to change the direction of the line. The possible values are:

The direction of specified here is referred to as the main axis.

flex-direction illustration
Here, the line with the arrow represents the direction of the main axis.

And here is a similar example with code:

In the example above, try the different possible values for flex-direction for the .row-parent selector. Pay attention to how the children change direction and order.

Justify Content

By default, flex-children are aligned along the main axis at the start of the axis line, kind of like words in a sentence. But this can be changed using the justify-content property on the flex parent. The possible values are:

Justify-content controls how items are spaced out from one another in the container.

justify-content illustration
In this illustration, the darker background box represents the flex-parent.

And a code example:

In the above example, try the different possible values for justify-content for the .flex-start-parent selector. Pay attention to how the children are redistributed across the main axis.

Margin: Auto

When margin: auto is applied to one side of a flex-child on the main axis, it serves to push that item and its neighbor as far from one another as possible. This allows an additional element of control along the main axis in addition to what justify-content allows. Notice in the following example how the main axis is defined as justify-content: space-between, but because the middle item has margin-left: auto, it is pushed all the way to the right and sits right next to the last item:

In the above example, try changing margin-left to margin-right for the .example div. If you want to go further, try moving the margin to other selectors to see what happens.

Align Items

By default, flex-children are stretched so that all are equally sized along the cross axis (at least the containing box is, so a background-color fills that whole space). The position of the item along the cross axis is controlled using the align-items property on the flex parent. Possible values are:

Align-items controls how items line up with one another.

align-items illustration
In this illustration, the darker background box represents the flex-parent.

In the above example, try the different possible values for align-items for the .stretch-parent selector. Pay attention to how the children are realigned on the cross axis.

Video Lesson

The following video demo is fully interactive. You can pause it at any time to directly edit the code, and resume playback to pickup where you left off.

Practice Exercise