前言
flex 布局十分灵活且实用。本文先说明了为什么会有弹性盒子，再介绍了 flex 布局的基本概念，最后介绍了flex 属性语法，比如经典的 flex: 1、flex: 0、flex: initial、flex: auto、flex: none。
为什么会有弹性盒子
弹性盒子（Flexible Box，或者叫 flex 布局）是一种用于按行或按列布局元素的一维布局方法。元素可以膨胀以填充额外的空间，收缩以适应更小的空间。
长久以来，CSS 布局中唯一可靠且跨浏览器兼容的创建工具只有 floats 和 positioning。这两个工具大部分情况下都很好使，但是在某些方面它们具有一定的局限性，让人难以完成任务：（摘自MDN）
- 在父内容里面垂直居中一个块内容。
- 使容器的所有子项占用等量的可用宽度/高度，而不管有多少宽度/高度可用。
- 使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同。
弹性盒子出现就是为了解决这些问题。
flex 布局
flex 布局的特性基于主轴或者交叉轴，由 flex-direction 定义的是主轴，交叉轴垂直于主轴。
当我们把一个容器的 display 属性值改为 flex 或者 inline-flex，就创建了 flex 容器。容器中的直系子元素就会变为 flex 元素，flex 元素会有一下特点：
- 元素排列为一行 (
flex-direction属性的初始值是row)。 - 元素从主轴的起始线开始。
- 元素不会在主维度方向拉伸，但是可以缩小。
- 元素被拉伸来填充交叉轴大小。
使用 flex 布局以后，子元素的 float、clear、vertical-align 属性将失效。
以下属性会作用于 flex 容器上：
flex-direction：定义主轴方向。flex-wrap：定义是否换行。flex-flow：flex-direction和flex-wrap属性的简写，默认值为row nowrap。justify-content：定义 flex 元素在主轴上的对齐方式。align-items：定义 flex 元素在交叉轴上的对齐方式。align-content：定义多条轴线的对齐方式，如果只有一根轴线，属性无效。
以下属性会作用于 flex 元素上：
order：定义 flex 元素的排列顺序，数值越小越靠前，默认值为0。flex-grow：定义 flex 元素在 flex 容器中分配剩余空间的相对比例。 剩余空间的大小为 flex 容器的大小减去所有 flex 元素的默认宽度之和。flex-shrink：定义 flex 元素的收缩比例。 flex 元素仅在默认宽度之和大于容器的时候才会发生收缩。 该属性定义的并不是压缩后 flex 元素的相对比例，而是 flex 元素被压缩的（减少的）相对比例。flex-basis：定义 flex 元素在主轴方向上的初始大小。 该属性定义受box-sizing属性影响，指定为对应的width和height。align-self：改变 flex 元素在交叉轴上的对齐方式，并覆盖已有的align-items的值。
flex 属性语法
flex 属性是 flex-grow、flex-shrink、flex-basis 属性的简写，默认值为 0 1 auto。
单值语法
值必须为以下其中之一：
- 一个无单位数 n：它会被当作
flex: n 1 0;，flex-shrink的值被假定为 1，flex-basis的值被假定为 0。 - 一个有效的宽度 （
width）值：它会被当作flex-basis的值。 - 关键字
none、auto和initial。
常见的很多简写都是单值语法，比如：
flex: 1：相当于flex: 1 1 0，可伸长也可缩短，不根据自身宽高来设置尺寸。flex: 0：相当于flex: 0 1 0，不可伸长但可缩短，不根据自身宽高来设置尺寸。flex: initial：相当于flex: 0 1 auto，不可伸长但可缩短，根据自身宽高来设置尺寸flex: auto：相当于flex: 1 1 auto，可伸长也可缩短，根据自身宽高来设置尺寸。flex: none：相当于flex: 0 0 auto，既不可伸长也不可缩短，根据自身宽高来设置尺寸。
双值语法
第一个值必须为一个无单位数，它会被当作 flex-grow 的值。
第二个值必须为以下之一：
- 一个无单位数：它会被当作
flex-shrink的值。 - 一个有效的宽度（
width）值：它会被当作flex-basis的值。
三值语法：
- 第一个值必须为一个无单位数，它会被当作
flex-grow的值。 - 第二个值必须为一个无单位数，它会被当作
flex-shrink的值。 - 第三个值必须为一个有效的宽度值，它会被当作
flex-basis的值。
参考资料
弹性盒子 - 学习 Web 开发 | MDN
flex 布局的基本概念 - CSS（层叠样式表） | MDN
flex - CSS（层叠样式表） | MDN (mozilla.org)
前端面试题之CSS篇
