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.

Reference

CSS Properties

Guides

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.

Specifications

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
29.0
10.0-ms
11.0
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

 

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/css_flexible_box_layout

CSS CSS Flexible Boxes CSS Reference Overview