CSS Flexible Box Layout

CSS Flexible Box Layout is a module of CSS that defines a CSS box model optimized for user interface design. 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. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.


CSS Properties


Using CSS flexible boxes
Step-by-step tutorial about how to build layouts using this feature.
Using flexbox to lay out Web applications
Tutorial explaining how to use flexbox in the specific context of Web applications.


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

Browser compatibility

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


Document Tags and Contributors

 Contributors to this page: WynnChen, chrisdavidmills, Arturio1970, teoli
 Last updated by: WynnChen,