实习快两个月了，在项目中经常会使用到flex布局，但是从未系统性去了解，总是导致在使用的时候还需要查阅文档。特此，借助此推文细致了解一下flex布局的各种属性。
首先，引用 MDN 对 flex 布局的一段介绍开启本文：
Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列
一、基本介绍
Flex布局意为弹性布局，任何一个容器都可以指定为Flex布局。例如：
.box {
display: flex;
}
行内元素也可以使用Flex布局：
.box {
display: inline-flex;
}
注意：设为Flex布局后，子元素的float、clear和vertical-align属性将失效。
采用 Flex 布局的元素，称为Flex容器（flex container），简称“容器”，所有子元素自动成为容器成员，成为 Flex 项目（flex item）。大体布局如下所示：
- main axis —— 主轴
- cross axis —— 交叉轴
- main start —— 主轴开始位置
- main end —— 主轴结束位置
- cross start —— 交叉轴开始位置
- cross end —— 交叉轴结束位置
- main size —— 单个项目占据的主轴空间
- cross size —— 单个项目占据的交叉轴空间
二、Flex容器
默认情况下，Flex容器中的所有子元素都会按下列行为布局：
- 元素排列成一列（即：flex-direction 的默认值为 row）
- 元素从主轴的起始线开始
- 元素不会在主维度方向拉伸，但是可以缩小
- 元素被拉伸来填充交叉轴的大小
flex-basis属性为autoflex-wrap属性为nowrap
2.1 主轴方向 —— flex-direction
Flex 容器有两根轴线 —— 主轴和交叉轴，主轴由 flex-direction 定义，交叉轴垂直于主轴。
flex-direction属性决定主轴的方向（即 flex-item 的排列方向）,取值如下
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
每个值对应的布局效果如下：
row
row-reverse
column
column-reverse
2.2 多行Flex容器 —— flex-wrap
虽然flexbox是一维模型，但可以使我们的flex项目应用到多行中。在这样做的时候，您应该把每一行看作一个新的flex容器。任何空间分布都将在该行上发生，而不影响该空间分布的其他行。
该属性取值如下：
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
nowarp：（默认）不换行
wrap：换行，第一行在顶部
wrap-reverse：换行，第一行在底部
2.3 flex-flow 属性
flex-flow 属性是 flex-direction属性 和 flex-wrap属性的简写形式，默认值为 row nowrap
.box {
flex-flow: <flex-direction> <flex-wrap>;
}
2.4 主轴对齐方式 —— justify-content
justify-content 属性用来决定子元素在主轴方向上的对其方式。默认值为 flex-start，元素从起始线开始排列。
该属性取值如下：
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
flex-start：默认值，向主轴起始位置靠齐
flex-end：向主轴结束位置靠齐
center：向主轴中心位置靠拢
space-between：向主轴两端对齐，每个子元素间隔相等
space-around：每个子元素在主轴上两侧的间隔相等，所以子元素之间的间隔是子元素与容器边界边界间隔的两倍
space-evently：每个子元素在主轴上的间隔，以及子元素与容器边界的间隔相等
2.5 交叉轴对齐方式 —— align-items
align-items属性定义项目在交叉轴上如何对齐。该属性取值如下：
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
flex-start：向交叉轴起始位置对齐
flex-end：向交叉轴结束位置对齐
-
center：向交叉轴中间对齐
baseline：按交叉轴基线对齐
strech：默认值，如果项目未设置高度或设为auto，将占满整个容器的高度。
2.6 多轴的对齐方式 —— align-content
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。该属性取值如下：
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
flex-start：交叉轴的起点对齐
flex-end：交叉轴的终点对齐
cneter：交叉轴的中点对齐
space-between：交叉轴两端对齐
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
strech：默认值，轴线占满整个交叉轴。
三、Flex项目
3.1 项目的排列顺序 —— order
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
.item {
order: <integer>;
}
下面的例子中将项目A的order设置为1：
3.2 项目的放大比例 —— flex-grow
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
.item {
flex-grow: <number>; /* default 0 */
}
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
下面例子中分别设置：1 2 3 4
3.3 项目的缩小比例 —— flex-shrink
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
.item {
flex-shrink: <number>; /* default 1 */
}
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
值越大，缩小比例越大。下面例子中分别设置：1 2 3 4：
3.4 flex-basis
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
.item {
flex-basis: <length> | auto; /* default auto */
}
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
3.5 flex
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
3.6 align-self
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
在使用flex布局时，需要注意的是：
- 默认情况下，flex布局中的项目，在主轴上会缩放，在交叉轴上会拉伸。
- 如果给flex容器中的项目设置了宽度（width）或者高度（height）时，项目会以固定大小显示，不会进行拉伸或者缩放。但是如果子项设置了flex-grow或者flex-shrink属性时，情况又有所不同。具体还是要看实际操作。
