CSS重点——弹性布局

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

（1）弹性布局（display:flex）

弹性盒子的真正价值体现在它的灵活性/响应性。

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex 项目（flex item），简称"项目"。

主轴（main axis）是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为 main start 和 main end。

交叉轴（cross axis）是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。

容器的属性：（属性定义在容器上即display:flex的元素）

（1）flex-direction：指定主轴的方向— 它默认值是 row，这使得它们在按你浏览器的默认语言方向（中文为从左到右）排成一排。

.box {

  flex-direction: row | row-reverse | column | column-reverse;

}

它的值有四个：

-row（默认值）：主轴为水平方向，起点在左端。

-row-reverse：主轴为水平方向，起点在右端。

-column：主轴为垂直方向，起点在上沿。

-column-reverse：主轴为垂直方向，起点在下沿。

（2）flex-wrap:当你在布局中使用定宽或者定高的时候，可能会出现问题即处于容器中的弹性盒子子元素会溢出，破坏了布局，使用该属性和值会对布局进行调整（如何换行），任何溢出的元素将被移到下一行。

它的值有三个：

-nowrap（默认）：不换行。

-wrap：换行，第一行在上方。

- wrap-reverse：换行，第一行在下方。

（3）flex-flow： flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

（4）水平和垂直对齐

align-items 控制 flex 项在交叉轴上的位置。默认的值是 stretch，其会使所有 flex 项沿着交叉轴的方向拉伸以填充父容器。如果父容器在交叉轴方向上没有固定宽度（即高度），则所有 flex 项将变得与最长的 flex 项一样长（即高度保持一致）。

在上面规则中我们使用的 center 值会使这些项保持其原有的高度，但是会在交叉轴居中。

你也可以设置诸如 flex-start 或 flex-end 这样使 flex 项在交叉轴的开始或结束处对齐所有的值。

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

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

-center：交叉轴的中点对齐。

-baseline: 项目的第一行文字的基线对齐。

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

justify-content 控制 flex 项在主轴上的位置。默认值是 flex-start，这会使所有 flex 项都位于主轴的开始处。

-flex-start（默认值）：左对齐

-flex-end：右对齐

-center： 居中

-space-between：两端对齐，项目之间的间隔都相等。

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

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

它的值有四个：

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

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

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

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

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

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

项目的属性：（属性设置在项目上）

注意：flex 嵌套——设置一个元素为flex项目，那么他同样成为一个flex 容器，它的孩子(直接子节点)也表现为 flexible box 。

（1）flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

它的值为一个数值。

（2）flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

它的值为一个数值。

（3）flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

（4）flex 项的动态尺寸

flex:2,这是一个无单位的比例值，表示每个 flex 项沿主轴的可用空间大小。（将可用空间大小按flex项数目分配，该flex项分配2份）

  article {flex: 1;} article:nth-of-type(3) {flex: 2;}

（表示空间按比例分配，第三个article占两份）

flex 是一个可以指定最多三个不同值的缩写属性：

第一个就是上面所讨论过的无单位比例。可以单独指定全写 flex-grow 属性的值。

第二个无单位比例 — flex-shrink — 一般用于溢出容器的 flex 项。这指定了从每个 flex 项中取出多少溢出量，以阻止它们溢出它们的容器。

第三个是上面讨论的最小值。可以单独指定全写 flex-basis 属性的值。

(5) align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

（6）排序order:改变 flex 项的布局位置，而不会影响到源顺序。

-所有 flex 项默认的 order 值是 0。

-order 值大的 flex 项比 order 值小的在显示顺序中更靠后。

-相同 order 值的 flex 项按源顺序显示。所以假如你有四个元素，其 order 值分别是2，1，1和0，那么它们的显示顺序就分别是第四，第二，第三，和第一。

-第三个元素显示在第二个后面是因为它们的 order 值一样，且第三个元素在源顺序中排在第二个后面。

它的值为一个数值。

本文有参考Flex 布局教程：语法篇 - 阮一峰的网络日志 (ruanyifeng.com)