原文链接： www.ruanyifeng.com
一、flex布局是什么
flex布局指“弹性布局” 注：设置为flex布局后，子元素的float、clear、vertical-align将失效。
二、容器的属性
2.1 flex-direction属性
flex-direction决定主轴的方向。
.box {
flex-direction: row row-reverse column column-reverse;
}
- row: 主轴为水平方向，起点在左端（默认）。
- row-reverse：主轴为水平方向，起点在右端。
- column：主轴为垂直方向，起点在上沿。
- column-reverse：主轴为垂直方向，起点在下沿。
2.2 flex-wrap
flex-wrap定义，如果一行排不下，将如何换行。
.box {
flex-wrap: nowrap wrap wrap-reverse
}
- nowrap: 不换行（默认）。
- 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定义了元素在主轴上的对齐方式。
.box {
justify-content: flex-start flex-end center space-between space-around
}
- flex-start：左对齐（默认）。
- flex-end： 右对齐。
- center：居中。
- space-between：两端对齐，元素之间的间隔都相等。
- space-around：每个元素两侧的间隔相等。元素之间的间隔比元素与边框的间隔大一倍。
2.5 align-items
align-items定义交叉轴上的元素如何对齐
.box {
align-items: flex-start flex-end center baseline stretch
}
- flex-start：交叉轴起点对齐（默认）。
- flex-end：交叉轴终点对齐。
- center：居中对齐。
- baseline：与元素第一行文字的基线对齐。
- stretch：如果容器未设置高度或auto，元素将充满整个容器高度。
2.6 align-content
align-content定义了多根轴线的对齐方式。如果只有一根轴线，将不生效。
.box {
align-content: flex-start flex-end center space-between space-around stretch;
}
- flex-start：与交叉轴的起点对齐。
- flex-end：与交叉轴的终点对齐。
- center：与交叉轴的中点对齐。
- space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
- space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch（默认值）：轴线占满整个交叉轴。
三、元素的属性
3.1 order
order定义元素的排列顺序，数字越小越靠前，默认为0.
3.2 flex-grow
flex-grow定义元素的放大比例，默认为0，即存在剩余空间，也不放大。
如果所有元素的flex-grow设置为1，他们将等分空间。如果一个元素设置为2，其他设置为1，前者所占空间是后者的两倍。
3.3 flex-shrink
flex-shrink定义了元素的缩小比例，默认为1，如果空间不足，元素将缩小。
如果所有元素的flex-shrink都设为1，当空间不足时，元素将等比例缩小。如果其中一个设置为0，则仅改元素不缩小。
3.4 flex-basis
flex-basis定义了在分配多余空间之前，元素占据主轴的空间。默认值auto，元素本身大小
3.5 flex
flex是flex-grow flex-shrink flex-basis的简写，默认值为0 1 auto。
3.6 align-self
align-self表示某个属性可以与其他属性有不一样的对齐方式，可覆盖align-items的属性。默认值为auto，继承父元素的align-items属性，如果没有父元素，则等同于stretch。
