CSS3 Flexible Box Layout

Grid is great for adaptive layout, but it’s not the only option available. In the IE10 platform preview developers can also use Flexible Box Layout (aka “Flexbox”) to lay out elements in a fluid, source-independent way. Flexbox and Grid share many common aspects – elements are placed inside of a parent container, and their size and position are adjusted depending on the parent size. The key difference between Flexbox and Grid is that Flexbox lays out its content along a single axis (vertical or horizontal) whereas grid can lay out content in both rows and columns. Also, the default behavior of Flexbox is to “stack” elements along one side of the container, whereas the default behavior of Grid is to place elements “on top” of each other in row 1, column 1.

While many behaviors that can be achieved with Flexbox are also possible with Grid, and vice versa, Flexbox is best suited for creating individual components and collections (e.g. toolbars, image collections) while Grid is designed for creating full-page layouts, and for components where individual elements overlap.

The basics of using Flexbox are straightforward. The example below starts with three buttons (individual components of a basic media toolbar) laid out in a containing div. By default, these buttons are laid out with display: inline-block, which means that they have an intrinsic size that does not change as the container size changes. This can lead to unused white space where the layout does not adapt to the available space.

Result of markup above

With flexible box layout (i.e. display: box) you can specify that the button container will lay out its children such that each child element has an equal share of the available space in the container. Now the buttons fill the container completely, and will do so regardless of how the container size changes. This is an approach that works well with flexible grid cells – if the outer container is a div that is sized to fill a flexible grid cell, then not only does the overall layout adapt as the screen size changes, but the individual toolbar changes as well.

#playControl { display: -ms-box; }
button { -ms-box-flex: 1; }

Result of markup above

Another useful feature of Flexbox is the ability to act as a container for an arbitrary number of items, especially using the box-lines property. Specifically, a container element (such as a div) with display: box; set will automatically stack elements in that container towards one side of the container (the left side of the container, for most Western languages). If the box-lines property is set to multiple, then a Flexbox container will arrange content elements in multiple rows of content, if vertical space allows. This means that a flexible container element can automatically arrange its contents to make the best use of space, without the designer having to know how many items are in the container and having to explicitly place each item.

In the example images below, the same five items are arranged in a single row when the container is wide enough, but a second row of items is created beneath the first when the container is too narrow. This approach can be used when a dynamic data query has returned an unknown number of items, and you want to display them in a simple, straightforward way.

1

2

3

4

5

#collectionContainer { -ms-box-lines: multiple; }