CSS Flexible Box Layout

This translation is incomplete. Please help translate this article from English

CSS Flexible Box Layout is a module of CSS that defines a CSS box model optimized for user interface design, and the layout of items in one dimension. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated.

Basic Example

In the following example a container has been set to display: flex, which means that the three child items become flex items. The value of justify-content has been set to space-between in order to space the items out evenly on the main axis. An equal amount of space is placed between each item with the left and right items being flush with the edges of the flex container. You can also see that the items are stretching on the cross axis, due to the default value of align-items being stretch. The items stretch to the height of the flex container, making them each appear as tall as the tallest item.


CSS Properties

Glossary entries


Basic Concepts of Flexbox
An overview of the features of flexbox
Relationship of flexbox to other layout methods
How flexbox relates to other layout methods, and other CSS specifications
Aligning items in a flex container
How the Box Alignment properties work with flexbox.
Ordering flex items
Explaining the different ways to change the order and direction of items, and covering the potential issues in doing so.
Controlling Ratios of flex items along the main axis
This article explains the flex-grow, flex-shrink and flex-basis properties.
Mastering wrapping of flex items
How to create flex containers with multiple lines and control the display of the items in those lines.
Typical use cases of flexbox
Common design patterns that are typical flexbox use cases.
Backwards compatibility of Flexbox
Browser status of flexbox, interoperability issues and supporting older browsers and versions of the spec

External resources


Specification Status Comment
CSS Flexible Box Layout Module Candidate Recommendation Initial definition.

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support 20.0 (20.0) 21.0-webkit
12.10 6.1-webkit
Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Basic support (Yes) 4.4 11 12.10 7.1-webkit