弹性布局（Flexible Box，缩写为 flex）
- 网页布局（layout）是CSS的一个重点应用，布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便。2009年，W3C提出了一种新的方案 —— Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex布局将成为未来布局的首选方案
- Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性
- 块级布局侧重垂直方式、行内布局侧重水平方向，flex布局是与方向无关的
- flex 布局可以实现 空间自动分配、自动对齐（flexible：弹性、灵活）
- flex 适用于简单的线性布局，更复杂的布局要交给 grid 布局
- 注意：Flex IE9及以下不支持，目前主要应用于移动Web页面中
display
- 要让一个元素变成伸缩容器，需要使用display属性。采用flex布局的元素，称为伸缩容器（flex container），容器内的子元素称为伸缩项目（flex item）
- 注意：浏览器会将任何直接在伸缩容器里的连续文字块包起来成为匿名伸缩项目
- 使用flex布局实现上是使元素FFC化（flex formatting context 伸缩格式化上下文），FFC是普通流的一种。而浮动流和定位流以及CSS其他属性对FFC是有影响的，主要表现在以下几点：
- float、clear 和 vertical-align 属性在伸缩项目上没有效果
- 伸缩容器的 margin 与其内容的 margin 不会重叠
- text-align 属性在伸缩容器上没有效果，因为其只可应用于块级 block 容器
- 另外，conlumns 属性伸缩容器上没有效果
- 弹性盒模型的两种容器块级伸缩容器和内联伸缩容器的区别类似于 block 和 inline-block 的区别，一个独占一行，另一个非独占一行
display: flex | inline-flex;
基本概念
- 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）
- 注意：主轴方向不一定是水平的，它主要取决于 justify-content 属性
- 主轴起点叫 main start，主轴终点叫 main end；侧轴起点叫 cross start，侧轴终点叫 cross end
- 伸缩项目默认沿主轴排列。单个伸缩项目占据的主轴空间叫 main size ，占据的侧轴空间叫 cross size
- 注意：伸缩项目的 main size和 cross size主要由宽度或高度决定
伸缩容器
// 以下6个属性作用在伸缩容器上
// 伸缩流方向：指定主轴的方向（即伸缩项目在伸缩容器中的排列方向）
flex-direction: row-reverse;
// 可设置的属性值包括：row（默认值。主轴为水平方向，起点在左端）、row-reverse（与 row 相同，但是以相反的顺序，主轴为水平方向，起点在右端）、column（主轴为垂直方向，起点在上沿）、column-reverse（与 column 相同，但是以相反的顺序，主轴为垂直方向，起点在下沿）、initial、inherit
// 注意：伸缩流方向与 direction 和 writing-mode 有关系
// 伸缩流换行：指定伸缩项目溢出伸缩容器时是否换行。默认情况下，项目都排在一条线（又称“轴线”）上
// 同时横轴的方向决定了新行堆叠的方向
flex-wrap: wrap;
// 可设置的属性值包括：nowrap（默认值。规定灵活的项目不拆行或不拆列）、wrap（在必要的时候拆行或拆列）、wrap-reverse（在必要的时候拆行或拆列，但是以相反的顺序）、initial、inherit
// CSS允许使用 overflow 属性来处理溢出内容的显示方式
// 伸缩项目的排列顺序同样与 direction 和 writing-mode 有关系
// 伸缩流：伸缩流方向与伸缩行换行的缩写。默认值为 row nowrap
flex-flow: row-reverse wrap;
// 可设置的属性值包括：flex-direction（详见上）、flex-wrap（详见上）、initial、inherit
// 主轴对齐：用来设置伸缩容器当前行伸缩项目在主轴方向的对齐方式，指定如何在伸缩项目之间分布伸缩容器额外空间
// 当一行上的所伸缩项目不能伸缩或可伸缩已达到最大长度时，这一属性才会对伸缩容器额外空间进行分配。当伸缩项目溢出某一行时，这一属性也会在项目的对齐上施加一些控制
justify-content: space-around;
// 可设置的属性值包括：flex-start（默认值。项目位于容器的开头）、flex-end（项目位于容器的结尾）、center（项目位于容器的中心）、space-between（两端对齐，项目之间的间隔都相等）、sapce-around（每个项目两侧的间隔相等，所以，项目之间的间隔比项目与边框的间隔大一倍）、initial、inherit
// 主轴对齐方式与 direction、writing-mode、flex-flow 都有关
// 侧轴对齐：用来设置伸缩容器当前行伸缩项目在侧轴方向的对齐方式
align-items: center;
// 可设置的属性值包括：stretch（默认值。项目被拉伸以适应容器）、center（项目位于容器的中心）、flex-start（项目位于容器的开头）、flex-end（项目位于容器的结尾）、baseline（项目位于容器的基线上，项目的第一行文字的基线对齐）、initial、inherit
// 如果伸缩项目有 width/height 属性将优先于侧轴对齐为拉伸 stretch 的方式
// 侧轴对齐方式与 direction、writing-mode、flex-flow 都有关
// 堆栈伸缩行：指定多个伸缩项目行在侧轴的对齐方式
align-content: space-around;
// 可设置的属性值包括：stretch（默认值，项目被拉伸以适应容器）、center（项目位于容器的中心）、flex-start（项目位于容器的开头）、flex-end（项目位于容器的结尾）、space-between（与交叉轴两端对齐，轴线之间的间隔平均分布）、space-around（每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍）、initial、inherit
// 堆栈伸缩行与direction、writing-mode、flex-flow都有关
伸缩项目
- 一个伸缩项目就是伸缩容器的一个子元素。伸缩容器中的文本或伪元素也被视为一个伸缩项目。以下6个属性设置在伸缩项目上
- 如果设置的元素不是弹性盒模型对象的子元素，则下列设置是不起作用的，并且是针对于弹性容器内的第一代子元素
// 显示顺序：定义伸缩项目的排列顺序，数值越小，排列越靠前
div:nth-of-type(1) {order: 1;}
div:nth-of-type(2) {order: 3;}
div:nth-of-type(3) {order: 2;}
// 可设置的属性值包括：number（默认值是 0。规定灵活项目的顺序，可设置为负数）、initial、inherit
// 伸缩容器中的伸缩项目默认显示顺序是遵循文档在源码中出现的先后顺序（HTML文档的DOM结构中的先后顺序）
// 扩展比率：当伸缩容器的额外空间为正值时，此伸缩项目相对伸缩容器里其他伸缩项目能扩展的空间比例
div:nth-of-type(1) {flex-grow: 1;}
div:nth-of-type(2) {flex-grow: 3;}
div:nth-of-type(3) {flex-grow: 1;}
// 可设置的属性值包括：number（一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0，即如果存在剩余空间，也不放大）、initial、inherit
// 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果其中一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍
// 收缩比率：当伸缩容器的额外空间为负值时，此伸缩项目相对于伸缩容器里其他伸缩项目能收缩的空间比例
div:nth-of-type(1) {flex-shrink: 1;}
div:nth-of-type(2) {flex-shrink: 3;}
div:nth-of-type(3) {flex-shrink: 1;}
// 可设置的属性值包括：number（一个数字，规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1）、initial、inherit
// 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果其中一个项目的flex-shrink属性为0，其它项目都为1，当空间不足时，前者不缩小
// 伸缩基准值：伸缩项目在主轴方向上的初始大小
// 定义了在分配多余空间之前，项目占据的主轴空间（main size），浏览器根据这个属性，计算主轴是否有多余空间
div:nth-of-type(2) {flex-basis: 80px;} // 设置第二个弹性盒元素的初始宽／高（看水平还是垂直）为 80 像素
// 可设置的属性值包括：length（可以是一个数字后面跟着px、em等单位，也可以是一个百分数，相对于其父伸缩容器的主轴长度）、auto（默认值，即项目的本来值大小）、initial、inherit
// 它可以设为跟width或height属性一样的值（比如 80px），则项目将占据固定空间
// 如果flex-basis的值为 0，表示伸缩项目在主轴方向上的初始大小为0，则分配所有空间；如果flex-basis的值为 auto，表示伸缩项目在主轴方向上的初始大小为其本身的大小，则分配剩余空间
// 伸缩基准值、扩展比率和收缩比率都可以为小数，但不能为负数
// 伸缩性：是扩展比率、收缩比率和伸缩基准值的缩写
// flex-grow、flex-shrink 和 flex-basis 属性的简写属性，默认值为 0 1 auto（后两个属性值可选）
flex: 1; // 相当于 flex: 1 1 0%，让所有弹性盒模型对象的子元素都有相同的长度，忽略它们内部的内容
// 可设置的属性值包括：flex-grow、flex-shrink、flex-basis、auto（与 1 1 auto 相同）、none（0 0 auto）、initial（0 1 auto）、inherit
// 当flex为关键字 none 或存在 auto时，flex-basis 为 auto；若flex只有数字值，则 flex-basis 为 0%；
// 自身侧轴对齐方式：单个伸缩项目在侧轴的对齐方式，
// align-self 属性允许单个项目有与其他项目不一样的对齐方式。该属性可以覆盖伸缩容器的侧轴对齐方式 align-items
align-self: center;
// 可设置的属性值包括：auto（默认值。元素继承了它的父容器的align-items属性，如果没有父元素，则等同于stretch）、stretch（元素被拉伸以适应容器）、center（元素位于容器的中心）、flex-start（元素位于容器的开头）、flex-end（元素位于容器的结尾）、baseline（元素位于容器的基线上）、initial、inherit
// 如果 align-self 的值为 auto，则其计算值为伸缩项目的伸缩容器的 align-items值
// 如果伸缩项目的任一个侧轴上的外边距为 auto，则该伸缩项目在伸缩容器的剩余空间内居中对齐，且 align-self 没有效果
参考
