Flexbox

Demo starter files

Flexbox is a powerful tool for modern layout. The feature in its current form has had good cross browser support since 2013, a few years before CSS grid (2017). Because it had features that were difficult to achieve by older methods, it has been used for whole page layouts. However, it's usually best to use flexbox for smaller components now that we have CSS grid.

What is Flexbox?

Flex is a CSS display mode that turns an element into a flex container. All of its direct child elements become flex items. Rather than following normal block formatting rules, the items can be stretched and aligned in relation to one another in many different ways within the parent flex container.

Flex items can be laid out in a row
Flex items distributed in a row.

Flexbox is one dimensional. This means that alignment and distribution of items can only be controlled on one axis (in one direction), even if the items wrap onto multiple lines.

While it's possible to create a grid using percentage widths and margins, this forfeits the ability to use some of flexbox's features (flex-grow and flex-shrink). If you need to be able to draw lines in both directions through the content, CSS grid is generally a better option.

Flexbox only handles one dimension
Each line of flex items is distributed independently of the other lines.

How to Make a Flexbox

This lesson and demo illustrates almost all of the many things you can do with flexbox, but the minimum basic setup is very simple. All you need is the following:

  • An element to serve as your flex container
  • Child elements that will become flex items
  • Set display: flex on the container

All of the direct children of your flex container will become flex items and automatically lay themselves horizontally. Then, to change their size and "squishiness", you'll use different values for the flex property, which gets applied to the child elements.

Axis and Direction

The most difficult thing about flexbox is probably understanding the direction and axes of the content being laid out. The properties will feel a lot more intuitive to use and memorize once you have a handle on this.

By default, flexbox lays items in a row. In this case, the main axis is horizontal and the cross axis is vertical. Since our web pages are written in english, the direction of the main axis is left to right.

The main and cross axis on a row flexbox
The main and cross axes for flex-direction: row

If we switch the flex direction to column, the axes switch, so the main axis becomes vertical and the items are displayed from the top down.

The main and cross axis on a column flexbox
The main and cross axes for flex-direction: column

Why don't we use physical directions like top bottom bottom left and right? Because CSS is moving toward the use of logical properties instead of physical properties. Logical properties like "start" and "end" take the writing mode into account. This allows our designs to adapt for internationalization with far less work. A page written in English that uses logical properties can be automatically reversed for right-to-left or even vertical languages, and the CSS will automatically lay our content out in the proper direction and axis.

When to Use Flexbox

Some of the most common places where flexbox is good to use include:

  • Navigation and split navigation
  • Form controls
  • Arranging media like pictures with associated text
  • Super simple vertical centering
  • Card items with sticky footers

Flexbox is easiest to understand by seeing it in action. Let's look at some of the common properties and use cases in the demo files.