Finally, Flexbox

Like a lot of CSS, flex has shorthand properties.

But again, we would avoid them⁠—the system can be hard enough to understand. This will be true when we get to grid as well⁠—often being a little bit more verbose in your code will make things easier to understand, especially starting out.

After specifying an element as flex, we can set its main axis with the flex-direction property. By default (you don’t have to write it), this behaves as flex-direction: row;⁠—so you’ll generally only be adding it when you want something going vertical, with flex-direction: column; :

flex-direction – MDN
Always row by default.

You can also combine these with a -reverse suffix, which visually reorders the items along the main axis, flipping the start and end:

Keep in mind that all flex reordering is only visual⁠—it obviously can’t change the order in your HTML. This means that keyboard navigation and screen readers still sequence through the items as they are in your code. So for good, logical accessibility, keep in mind the semantic reading order!

Since flexbox is one-dimensional, by default it will try to cram everything into one line⁠—even when there is not enough room! But you can tell it to wrap onto additional lines by adding the flex-wrap: wrap; property/​value (set to nowrap by default):

flex-wrap – MDN
The only two-dimensional flex use.

There is also a -reverse suffix when wrapping, which will sequence items from end to start:

So most of what we’ve seen here is… somewhat possible using float and position⁠—though not at all easily and only when you know the size/​counts of your content.

justify-content – MDN
How should we space items out?

But the justify-content property is where flexbox starts to allow novel layouts, by dividing up the extra/​available free space between elements⁠—akin to distribute options in Figma/​Adobe applications. justify-content does this on our main axis:

When our main axis is vertical, with flex-direction: column; :

And then perpendicular to justify along the main axis, flexbox has the align-items property to position elements along the cross axis. It has similar values:

align-items – MDN
For the cross/​perpendicular axis.

And for the vertical:

When we have a flex element with flex-wrap set, we can also position the lines within the parent/​container with the align-content property⁠—akin to justify-content with each line:

align-content – MDN
When there is extra room.

align-content can also be used with a vertical/​flex-direction: column; axis, not shown here. This doesn’t often come up, as you have to specify/​know a height to force a column wrap.

While you could use margin to separate your flex children, it would apply to the items on the outer edges, too. (Hence our many :not(:first-child) selectors for margin in the examples, so far.)

• gap – MDN
• row-gap – MDN
• column-gap – MDN
  These are common with CSS grid!

Flex added support for intuitive gap properties, which fix this problem⁠—by applying spacing only between children. This is particularly helpful with dynamic, wrapping content and responsive designs⁠—where you won’t always know which element ends or starts a line (to take their margin off):

If we did a Flexbox spec workshop, where we went over the whole spec in excruciating detail and sketched illustrations, who would come?

Fantasai again, 2015

Kind of like the -reverse suffix⁠—you can individually apply the order property to a flex item (child). Items with the same/​tied order (like everything with the default of order: 0; ) will be displayed in their HTML/​source order:

order – MDN
Visual/​display only!

Other order-based selectors (like :first-child) won’t be fooled by this reordering⁠—as you can see, we used them here. They still use the HTML/​DOM order. And again, this change is only visual⁠—so don’t use it when screen reader/​content sequence accessibility is a concern!

These properties tell the flex items to… grow or shrink, if necessary⁠—defining the amount of available/​remaining space in the container an element should take up⁠—filling the whole container, like bento boxes.

• flex-grow – MDN
• flex-shrink – MDN
  Who takes up the extra space?

It takes a unitless proportional value, akin to fractions or a factor/​multiplier. If you give one flexed child flex-grow: 1; it will take up all the extra space; another element with flex-grow: 2; would then take twice as much of that space as the first one (the available space with 3 total units):

And flex-shrink works the same way⁠—defining what proportion an element should shrink when forced to by the flex layout. The most use you’ll see of this is flex-shrink: 0; , which tells all the other items to shrink instead!

The flex-basis property is a little like inline-size and block-size⁠—depending on your main axis. It defines what the child item’s content box size should be before any remaining space is distributed.

flex-basis – MDN
How much of the space.

This defaults to auto, which falls back to any specified inline-size or block-size⁠—and if those aren’t present, will just use the size of the content. You specify this flex-basis with length units like % and px :

Finally, we have an individual override for an align-items property set on the parent⁠—the align-self property⁠—which adjusts (with the same keywords/​values) the alignment of the specific child item it is applied to:

align-self – MDN
Overrides this child! Rebels.

This is a lot of stuff! Flex can sometimes be tough to wrap one’s head around, but it is so much better than float and inline-size and margin shenanigans.

Much of what you look at on the web is laid out in flexbox (and its followup which we keep mentioning, CSS Grid).

Flexbox is a new layout model for CSS.

The contents of a flex container can be laid out in any direction, can be reordered, can be aligned and justified within their container, and can “flex”their sizes and positions to respond to the available space.

We expect this model to be particularly useful for UI layouts.

Fantasai, 2017