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.
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.
The properties align-content
, align-self
, align-items
and justify-content
initially appeared in the Flexbox specification, but are now defined in Box Alignment and the Flexbox spec refers to the Box Alignment Specification for up to date definitions. Additional alignment properties are also defined in Box Alignment.
Specification | Status | Comment |
---|---|---|
CSS Flexible Box Layout Module | Candidate Recommendation | Initial definition. |
© 2005–2018 Mozilla Developer Network and individual 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