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.
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.