In preparation for CSS Grid shipping in browsers in March 2017, I worked on a number of guides and reference materials for the CSS Grid specification, which were published on MDN. With that material updated, we thought it would be nice to complete the documentation with similar guides for Flexbox, and so I updated the existing material to reflect the core use cases of Flexbox.

This works well; with the current state of the specs, Flexbox now sits alongside Grid and Box Alignment to form a new way of thinking about layout for the web. It is useful to reflect this in the documentation.

The new docs at a glance

I’ve added eight new guides to MDN:

• Basic concepts of flexbox
• Relationship of flexbox to other layout methods
• Aligning items in a flex container
• Ordering flex items
• Controlling ratios of flex items along the main axis
• Mastering wrapping of flex items
• Typical use cases of flexbox
• Backwards compatibility of flexbox

One of the things I’ve tried to do in creating this material is to bring Flexbox into place as one part of an overall layout system. Prior to Grid shipping, Flexbox was seen as the spec to solve all of our layout problems, yet a lot of the difficulty in using Flexbox is when we try to use it to create the kind of two-dimensional layouts that Grid is designed for. Once again, we find ourselves fighting to persuade a layout method to do things it wasn’t designed to do.

Therefore, in these guides I have concentrated on the real use cases of Flexbox, looked at where Grid should be used instead, and also clarified how the specification works with Writing Modes, Box Alignment and ordering of items.

A syllabus for layout

I’ve been asked whether people should learn Flexbox first then move on to Grid Layout. I’d suggest instead learning the basics of each specification, and the reasons to use each layout method. In a production site you are likely to have some patterns that make sense to lay out using Flexbox and some using Grid.

On MDN you should start with Basic Concepts of flexbox along with the companion article for Grid — Basic concepts of grid layout. Next, take a look at the two articles that detail how Flexbox and Grid fit into the overall CSS Layout picture:

• Relationship of Flexbox to other layout methods
• Relationship of Grid Layout to other layout methods

Having worked through these guides you will have a reasonable overview. As you start to create design patterns using the specifications, you can then dig into the more detailed guides for each specification.

Similarities between Flexbox and Grid

You will discover as you study Flexbox and Grid that there are many similarities between the specifications. This is by design; you’ll find this note in the Grid specification:

“If you notice any inconsistencies between this Grid Layout Module and the Flexible Box Layout Module, please report them to the CSSWG, as this is likely an error.”

The Box Alignment Properties that are part of the Flexbox spec have been moved into their own specification — Box Alignment Level 3. Grid uses that specification as a reference rather than duplicating the properties. This means that you should find the information about Aligning items in a flex container very similar to that found in Box alignment in Grid Layout. In many ways, alignment is easier to understand when working with Grid Layout as you always have the two axes in play.

This movement of properties from Flexbox to Grid works in the other direction too. In Grid we have the grid-gap property, representing a shorthand way of setting grid-column-gap and grid-row-gap. During the course of this year these will have been moved to the Box Alignment Specification too, and renamed gap, column-gap and row-gap. Once browsers implement these for Flexbox, we will be able to have gaps in Flexbox as we do for Grid, rather than needing to use margins to create space between items.

Browser support for flexbox

Flexbox has excellent browser support at this point. I have detailed the things to look out for in Backwards compatibility of flexbox. Issues today tend to be in older versions of browsers which supported earlier versions of the specification under vendor prefixes. The issues are well documented at this point both in my MDN guide and on the Flexbugs site, which details interoperability issues and workarounds for them.

The Flexbox and Grid specifications are both now at Candidate Recommendation status. We don’t expect there to be large changes to either specification at this point. You should feel confident about learning and integrating Flexbox and Grid into production websites.

Moving to a new model of thinking about layout

With Flexbox and Grid, plus the related specifications of Box Alignment and Writing Modes, we have new layout models for the web, which have been designed to enable the types of layouts we need to create. Those of us who have been battling with floats to create layout for years have to shift our thinking in order to really take advantage of what is now possible, rather than trying to force it back into what is familiar. Whether your interest is in being able to implement more creative designs, or simply to streamline development of complex user interfaces I hope that the materials I’ve created will help you to gain a really thorough understanding of these specs.