Flexible box ("Flexbox") layout

Article
10/20/2016

Flexible box layout (flexbox) adds to the four basic layout modes defined in Cascading Style Sheets, Level 2 Revision 1 (CSS2.1): block layout, inline layout, table layout, and positioned layout. With Flexbox layout, you can lay out complex webpages more easily and make the relative position and size of elements adjust as screen and browser window sizes change. Flexbox can lessen the reliance on floats and table-based layouts, which are more complicated to position and size correctly.

Flexbox layout makes it easier to:

Build a layout that is fluid—even by using different screen and browser window sizes—but contains elements (such as images or controls) that maintain their position and size relative to each other.
Specify how you can reallocate excess space along the horizontal or vertical layout axes of a series of elements to increase the size of given elements.
Specify how you can reallocate excess space along the layout axis of a series of elements fall before, after, or between the series of elements.
Specify how you can move excess space that's perpendicular to the layout axis of an element to the area around the element—for instance, extra space above or below buttons that have been laid out side-by-side.
Control the visual direction of elements laid out on the page—for instance, top-to-bottom, left-to-right, right-to-left, or bottom-to-top—without adjusting the specified writing-mode.
Reorder elements on the screen in a different order from how they are specified by the Document Object Model (DOM).

This example shows how Flexbox can be used to create a classic three-column page layout for wider screens that compresses into a single column layout for narrower displays.

Code example: http://samples.msdn.microsoft.com/workshop/samples/css/flexbox/flexbox.html

Flexbox container and flex items

To enable a flexbox layout, first create a flex container. A flex container forms a containing block for its contents (flex items). To create a flex container, apply display to an element and set it to flex or inline-flex:

display: flex | inline-flex

Setting display to flex causes an element to behave like a block-level flex container box. A block-level flex container box takes up the full width available inside of its parent container. Setting display to inline-flex causes an element to behave like an inline-level flex container box, which takes up only as much room as it needs and won't force new lines.

With respect to other elements outside the flex container, inline-level flex containers act similar to images. Block-level flex containers act similar to a normal div element.

A flex container can contain zero or more flex items. Each child of the flex container becomes a flex item. Text that is directly inside of the flex container is wrapped in an anonymous flex item. However, if the anonymous flex item only contains white space, it’s not rendered and is similar to setting it to display: none. You can manipulate the flex container and flex items inside the flex container using the flex, flex-basis, flex-grow, flex-shrink, flex-flow, flex-direction, flex-wrap, align-items, align-self, align-content, justify-content, and order properties.

As of Internet Explorer 11 for Windows 10, the content value for the flex-basis property is supported. The content value indicates that the flex basis is automatically-determined based on the flex item's content.

Setting flexbox orientation, wrapping, and order

When creating a flex container, you can specify the orientation of all child elements inside of the container. The flex-direction property sets the direction of the flex container's main axis, or the primary axis along which flex items are laid out. The flex-direction property allows you to specify if the children are displayed from right-to-left, left-to-right, top-to-bottom, or bottom-to-top.

You can also specify how you want the flex items to wrap when the flex container is resized. The flex-wrap property specifies whether child elements wrap onto single or multiple rows or columns.

Sometimes it's easier to set both the flex-direction and flex-wrap together by using the flex-flow shorthand property. These two sub-properties together define the flex container's main and cross axes.

flex-flow: <flex-direction> || <flex-wrap>

When necessary, the order property can visually reorder flex items. By default, flex items in a flex container are displayed in the same order as in the source document unless changed using this property.

#flexContainer { 
  display: flex;
  flex-flow: row wrap;
} 
#item1 {
  width: 120px;
  background:#6ABD27;
  order: 2;
}
#item2 {
  width: 120px;
  background:#00A6EE;
  order: 3;
}
#item3 {
  width: 120px;
  background:#6ABD27;
  order: 1;
}

<div id="flexContainer">
   <div id="item1">1</div>
   <div id="item2">2</div>
   <div id="item3">3</div>
</div>

In the CSS snippet above, the first property sub-value, row, in the flex-flow shorthand sets the flex container's main axis to the same orientation as the inline axis of the current writing mode. In this example, and by default, the writing mode flows horizontally from left-to-right and from top-to-bottom. The second property sub-value, wrap, in the flex-flow shorthand above specifies that flex items are wrapped and displayed in successive, parallel rows. Here, the flex container expands in height, perpendicular to the axis defined by the writing-mode property, to accommodate the additional rows when the flex container is resized

HTML elements using flexbox.

If the size of the flex container is reduced, the flex items display in separate rows, as specified in the flex-flow property as shown in this image. The order property is also used, so the flex items aren't displaying in the same order as specified in the source document.

Setting flexbox alignment

You can also specify the alignment of the flex container’s contents along the main axis and along the cross axis (perpendicular to the main axis) after any flexible lengths and auto margins are resolved. The justify-content, align-items, align-self, and align-content properties allow you to adjust this alignment.

Using the justify-content property, you can set how flex items are aligned along the main axis of the flex container after any flexible lengths and auto margins are resolved. The following picture shows the values for justify-content and their effects on a flex container with three flex items.

An illustration showing values for justify-content

To further adjust the alignment, you can also adjust the cross axis alignment of the flex container using the align-items property. The cross axis is the axis that is perpendicular to the main axis. The following picture shows the values for align-items and their effects on a flex container with three flex items.

It's also possible to override the value assigned to all the flex items in align-items, by specifying the align-self property on a flex item. Align-self sets the alignment value (perpendicular to the layout axis defined by the flex-direction property) of the flex items. The initial value is auto, which means by default the align-self property is equal to the align-items property of the parent. The align-items property uses the same values, with the addition of auto, as align-items. The picture above shows these values and their effects.

An illustration showing values for align-properties

You can further adjust alignment using the align-content property, which acts similarly to the justify-content property. However, the align-content property only has an effect when the flexbox has multiple lines. The align-content property aligns the flex container’s lines within the flex container when there's extra space in the cross axis. This image shows the values for align-content and their effects on a flex container with three flex items.

An illustration showing values for align-items and align-content

Setting the flexibility

If necessary, you can alter the flex items’ widths and heights to fill the space in the flex container. To do this, you can use the flex shorthand property. The flex container distributes free space to its items proportional to their flex grow factor, or shrinks them to prevent overflow proportional to their flex shrink factor.

The shorthand, flex, is defined using three sub-properties: flex-grow, flex-shrink, and flex-basis.

flex: none | [<flex-grow> <flex-shrink>? || <flex-basis>]

#flexContainer { 
  display: flex;
  flex-flow: row wrap;
} 
#item1 {
  width: 120px;
  background:#6ABD27;
  flex: 1 1 auto;
}
#item2 {
  width: 120px;
  background:#00A6EE;
  flex: 1 1 auto;
}
#item3 {
  width: 120px;
  background:#6ABD27;
  flex: 1 1 auto;
}

<div id="flexContainer">
   <div id="item1">flex item 1</div>
   <div id="item2">flex item 2</div>
   <div id="item3">flex item 3</div>
</div>

In the example above, the first sub-value in the flex shorthand corresponds to the flex-grow property. This property controls the flex growth factor, or how the flex item grows relative to other items in the flex container. The second sub-value corresponds to the flex-shrink property. This property controls how the flex item shrinks relative to other items in the flex container. The third sub-value corresponds to the flex-basis property. This property specifies the initial main size of the flex item before free space is distributed. The initial main size is a flex item's width or height along the main (primary) axis. The initial value is auto, which retrieves the value of the main size of the flex container.

In this example, the flex items are fully flexible and they absorb any of the free space available on the main axis.