Flex 布局

[HarleyWang93]

传统的网页布局中，我们经常使用display:block + margin + padding + float + position来实现，但随着网页越来越复杂，对于某些不确定宽高的元素想要实现垂直居中实际上是比较困难的，而随着 CSS3 中 Flex 布局的出现，解决了传统布局中一些不易实现的问题。

Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

Flex 布局具有以下特点：

1. Flex 布局与方向无关。
2. Flex 布局可以实现空间的自动分配、自动对齐，具有很强的灵活性。
3. Flex 布局试用于简单的线性布局，更复杂的布局可以考虑用 JS 或者 grid 实现。

Flex 布局的概念

在容器内，默认有两条轴，水平方向为主轴( main axis )，垂直方向为侧轴( cross axis )，主轴方向起始位置为主轴起点( main start )，主轴方向终点位置为主轴终点( main end )，侧轴方向起始位置为侧轴起点( cross start )，主轴方向终点位置为主轴终点( cross end )，容器的主尺寸为 main size ，侧尺寸为 cross size ，容器内的子元素为 flex item ，当给 container 设置display:flex，每一个子元素都是 container 的 item 。

Flex container 的属性

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

flex-direction 属性

flex-direction 表示主轴的方向。

flex-direction: row（默认值） | row-reverse | column | column-reverse;

• row：主轴方向为水平方向，从左至右。

• row-reverse：主轴方向为水平方向，从右至左。

• column：主轴方向为垂直方向，从上至下。

• column-reverse：主轴方向为垂直方向，从下至上。

flex-wrap 属性

flex-wrap: no-wrap（默认）| wrap | wrap-reverse;

flex-wrap 是指在主轴方向上如果项目过多排列不下时是否换行，默认情况下是不换行的。

• wrap：轴线方向换行，第一行在上。

• wrap-reverse：轴线方向换行，第一行在下

flex-flow 属性

flex-flow 是 flex-direction 和 flex-wrap 的简写，默认为 row 和 no-wrap。

flex-flow: <flex-direction> || <flex-wrap>;

justify-content 属性

justify-content是指主轴方向对齐方式。

justify-content:flex-start（默认） | flex-end | center | space-between | space-around;

• flex-start：主轴方向从左端对齐。

• flex-end：主轴方向从末端对齐。

• center：主轴方向从中间对齐。

• space-between：主轴方向两端对齐，项目之间的空间均匀分配。

• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items 属性

align-items 是指侧轴方向对齐方式。

align-items: flex-start | flex-end | center | baseline | stretch;

• flex-start：侧轴方向上端对齐。

• flex-end：侧轴方向底端对齐。

• center：侧轴方向中心对齐。

• baseline：侧轴方向上文字基线对齐。

• strech（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content 属性

align-content属性定义了多根轴线（多行或是多列）的对齐方式。如果项目只有一根轴线（一行或是一列），该属性不起作用。

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

• flex-start：与交叉轴的起点对齐。

• flex-end：与交叉轴的终点对齐。

• center：与交叉轴的中点对齐。

• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

• space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

• stretch（默认值）：轴线占满整个交叉轴。

Flex 项目的属性

• align-self
• flex-grow
• flex-shrink
• flex-basis
• flex
• order

align-self 属性

align-self 属性定义 flex 的单个项目在侧轴上的对齐方式，默认为 auto，表示继承父元素的 align-items，否则将覆盖 align-items 属性。

align-self: auto | flex-start | flex-end | center | baseline | stretch;

• center 属性：

其他值与align-items属性值用法相同。

flex-grow 属性

flex-grow 定义项目的扩展比率（一般使用在空间过多时），默认为 0，即便存在剩余空间，也不放大。

flex-grow: <number> ;   /* default 0 */

• 如果所有的项目不为 0，如 1/2/3，则等分剩余空间。

• 如果 item1 项目为 1，其他项目为 0，则 item1 占据所有剩余空间。

• 如果 item1 项目为 1，item2 项目为 2，则 item2 占据的剩余空间比 item1 多一倍。

flex-shrink 属性

flex-shrink 定义项目的收缩比率（一般使用在空间不足时），默认为 1，即空间不足时，项目缩小，为 0 表示不缩小。

该属性对负值无效。

flex-shrink: <number>; /* default 1 */

• 如果所有项目均为 1，则所有项目同比例缩小。

• 如果 item1 为 0，其他 item 均为 1，则 item1 不缩小，其他 item 同比例缩小。

flex-basis 属性

flex-basis 定义了在分配多余空间之前，项目占据的主轴空间( main size )。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

flex-basis: <length> | auto; /* default auto */

flex 属性

flex 属性是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。后两个属性可选。

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

order 属性

order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为 0。

该属性对负值有效。

order: <integer>;

小贴士

关于各属性浏览器的支持程度可以在 Can I use 查看。

推荐阅读

Flex 布局教程：语法篇