CSS 中的 Flex 布局 完全指南

Flex 弹性盒子布局是很强大的布局，它可以很方便的控制元素在垂直和水平方向上的行为。

要使用 Flex，首选需要一个 Flex 容器（flex container）。使用display: flex;创建，flex 是一个 CSS 的display属性中新添加一个值，而容器下的每个子元素将成为 flex item（伸缩项目）。伸缩项目将参与到 flex 布局中，所有由 CSS Flexible Box Layout Module（CSS伸缩盒布局模型）定义的属性都能被它们使用。

设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

主轴和交叉轴

容器存在两个轴，水平叫主轴（Main-Axis），垂直叫交叉轴（Cross-Axis）。主轴左边是开始位置（main start）右边是结束位置（main end），交叉轴上是开始位置（cross start）下是结束位置（cross end）。我们用 justify 属性控制主轴项目的空隙，使用 align 属性控制交叉轴项目之间的垂直行为。

容器的属性

容器一共有 6 个属性：

1. flex-direction
2. flex-wrap
3. flex-flow
4. justify-content
5. align-items
6. align-content

flex-direction

flex-direction 属性决定主轴的方向。一共有 4 个值row | row-reverse | column | column-reverse，初始值是row。交叉轴是垂直于主轴的，如果它值为column那么交叉轴就是水平方向。

• row 是默认
• row-reverse 将起点变为右边
• column 主轴为垂直方向，起点在上面
• column-reverse 主轴为垂直方向，起点在下面

flex-wrap

指定 flex 元素单行显示还是多行显示 。如果允许换行，这个属性允许你控制行的堆叠方向。它一共有 3 个值nowrap | wrap | wrap-reverse，起始值是nowrap。

• nowrapflex 的元素被摆放到到一行，这可能导致溢出 flex 容器
• wrapflex 元素 被打断到多个行中

• wrap-reverse和wrap的行为一样，但是cross-start和cross-end互换。

flex-flow

flex-direction和flex-wrap的简写。默认是flex-flow: row nowrap;

justify-content

定义了浏览器如何分配顺着父容器主轴的弹性元素之间及其周围的空间。它有很多属性，但是其中有很多是不常用。

常用的 7 个属性：

• space-between在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐
• space-around和space-between类似，但是每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半
• space-evenly和space-around类似，但是相邻flex项之间的间距，主轴起始位置到第一个flex项的间距，主轴结束位置到最后一个flex项的间距，都完全一样
• stretchflex 子项的宽度和大于容器，则各个子项根据自己的大小缩放来撑满容器，如果子项和的最小宽度大于容器，则会撑开容器，如果和小于容器则相当于flex-start
• flex-start从行首开始排列。每行第一个弹性元素与行首对齐，同时所有后续的弹性元素与前一个对齐
• flex-end从行尾开始排列。每行最后一个弹性元素与行尾对齐，其他元素将与后一个对齐
• center伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同

如果它和flex-direction: column;结合，则会这样：

align-items

定义项目在交叉轴上如何对齐。

它一共有 5 个常用属性。

• flex-start
• flex-end
• center
• stretch
• baseline

align-content

定义了多根轴线（多行）的对齐方式。该属性对单行弹性盒子模型无效。（即：带有flex-wrap: nowrap）。

一共有 6 个常用属性：

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

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

• center与交叉轴的中点对齐

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

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

• stretch拉伸所有行来填满剩余空间。剩余空间平均的分配给每一行（默认值）

flex item 的属性

flex 项一共有 6 个属性：

1. flex-basis
2. flex-grow
3. flex-shrink
4. flex
5. order
6. align-self

flex-basis

flex-basis和min-width相似，指定了 flex 元素在主轴方向上的初始大小。（如果不使用 box-sizing 来改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的宽或者高的大小。）根据内部内容扩展项目的大小。如果不是，将使用默认基准值。

flex-grow

定义弹性盒子项（flex item）的拉伸因子，将相对于同一行上所有其他项目的大小总和进行缩放，这些项目将根据指定的值自动调整。它的值是number，负数无效。

flex-shrink

指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

flex

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

order

用来重新排列项目的自然顺序。元素按照order属性的值的增序进行布局。拥有相同order 属性值的元素按照它们在源代码中出现的顺序进行布局。

align-self

会对齐当前 flex 行中的 flex 元素，并覆盖align-items的值. 如果任何 flex 元素的侧轴方向margin值设置为auto，则会忽略align-self。