CSS 的灵活框布局 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. The Flexbox spec now refers to the Box Alignment specification for up to date definitions. Also additional alignment properties are now defined in Box Alignment.
justify-content
align-content
align-items
align-self
place-content
place-items
row-gap
column-gap
gap
An overview of the features of Flexbox
How Flexbox relates to other layout methods, and other CSS specifications
How the Box Alignment properties work with Flexbox.
Explaining the different ways to change the order and direction of items, and covering the potential issues in doing so.
Explaining the flex-grow, flex-shrink and flex-basis properties.
How to create flex containers with multiple lines and control the display of the items in those lines.
Common design patterns that are typical Flexbox use cases.
Browser status of Flexbox, interoperability issues and supporting older browsers and versions of the spec
| 规范 | 状态 | 注释 |
|---|---|---|
| CSS Flexible Box Layout Module | 候选推荐 | 初始定义。 |
a community-curated list of Flexbox browser bugs and workarounds
This article provides a set of mixins for those who want to create cross-browser Flexbox experiences that even work in older browser that don't support the modern Flexbox syntax