Introduction

For a long time, the only reliable tools available for creating CSS layouts were things like floats and positioning, these are fine, but in some ways they are also rather limiting and frustrating. As you'll see, flexbox makes a lot of layout tasks much easier.

Flexbox is a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces.

To start usign it, we need to select which elements are to be laid out as flexible boxes. To do this, we set a special value of display on the parent element of the elements you want to affect.

section {display: flex;}

This causes the element to become a flex container, and its children to become flex items.

Now, you try! 🤓 Use the following demo to add display: flex to our container.

See the Pen Adding display: flex by Maria E. Lucena (@marugy99) on CodePen.

The flex model

When elements are laid out as flex items, they are laid out along two axes:

  • The main axis is the axis running in the direction the flex items are being laid out in.
  • The cross axis is the axis running perpendicular to the direction the flex items are being laid out in.

Flexbox provides a property called flex-direction that specifies what direction the main axis runs in, by default this is set to row. This property accepts four values:

  • row (default): same as text direction
  • row-reverse: opposite to text direction
  • column: same as row but top to bottom
  • column-reverse: same as row-reverse top to bottom

Use the following demo to see them in action:

See the Pen flex-direction demo - By Maru by Maria E. Lucena (@marugy99) on CodePen.

Flexible sizing

We can also control what proportion of space flex items take up compared to the other flex items. We do this by adding, for example: article {flex: 1;}

This is a unitless proportion value that dictates how much of the available space along the main axis each flex item will take up compared to other flex items. In this case, we are giving each article element the same value (a value of 1), which means they will all take up an equal amount of the spare space left.

We can also add different values to different items and this will change how they behave compared to the other flex items.

Use the following demo to see the difference, try adding flex: 1; to the first box and flex: 2; to the second box.

See the Pen flexible sizing demo - By Maru by Maria E. Lucena (@marugy99) on CodePen.

Alignment

You can also use flexbox features to align flex items along the main or cross axis.

justify-content controls where the flex items sit on the main axis and it accepts six different values

  • flex-start (default): items are packed toward the start line
  • flex-end: cross-end margin edge of the items is placed on the cross-end line
  • center: items are centered along the line
  • space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line
  • space-around: items are evenly distributed in the line with equal space around them
  • space-evenly: items are distributed so that the spacing between any two adjacent alignment subjects, before the first alignment subject, and after the last alignment subject is the same

Use the following demo to see them in action:

See the Pen Justify content by Maria E. Lucena (@marugy99) on CodePen.


Then we have align-items, which controls where the flex items sit on the cross axis and accepts five different values.

  • flex-start: cross-start margin edge of the items is placed on the cross-start line
  • flex-end: cross-end margin edge of the items is placed on the cross-end line
  • center: items are centered in the cross-axis
  • baseline: items are aligned such as their baselines align
  • stretch (default): stretch to fill the container

Use the following demo to see them in action:

See the Pen align-items demo - By Maru by Maria E. Lucena (@marugy99) on CodePen.

Playground

With this playground you can see how the different values of flex-direction, justify-content and align-items behave with each other!

Try adding row-reverse, space-around and center 👇

See the Pen flexbox playground - By Maru by Maria E. Lucena (@marugy99) on CodePen.