# 3、flex 布局
flex
flexbox是css3规范中引入的新布局模型：弹性盒模型(flex box)，以用简单的方式满足很多常见的复杂的布局需求，该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。这种布局在尺寸未知或者动态时也能工作
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
容器默认存在两根轴：水平的主轴和垂直的交叉轴，主轴的开始位置叫做 main start,结束的位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end
项目默认沿主轴排列，单个项目占据的主轴空间叫做cross start，占据的交叉轴空间叫做cross size
# 注意事项
注意
采用flex布局后，其子元素的float、clear、和vertical-align属性将失效
webkit内核的浏览器，必须加上-webkit前缀
# 容器的属性
下列属性设置在容器上
# flex-direction
决定项目的排列方向
row(默认)：主轴为水平方向，起点在左边row-reverse：同上，起点在右边column：主轴为竖直方向，起点在上边column：同上，起点在下边
# flex-wrap
决定如何换行（默认不换行）
nowarp（默认）：不换行wrap：换行，第一行在上方。wrap-reverse：换行，第一行在下方。
# flex-flow
TIP
此属性为flex-direction和flex-wrap的简写形式
row nowarp（默认值）
# justify-content（默认水平对齐）
定义子元素在主轴上的对齐方式。
flex-start（默认值）：左对齐flex-end：右对齐center： 居中space-between：两端对齐，项目之间的间隔都相等。space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
# align-items（默认竖直对齐）
定义元素在交叉轴上的排列方式。
stretch（默认值）：如果子元素未设置高度或设为auto，将占满整个容器的高度。flex-start：顶部对齐。flex-end：底部对齐。center： 垂直居中。baseline:元素的第一行文字的基线对齐。
# align-content（默认竖直对齐）
定义多根轴线（主轴）时子元素在交叉轴上的的对齐方式，如果项目只有一根轴线（主轴），则该属性不起作用
felx-start：整体上对齐flex-end：整体下对齐center：整体垂直居中space-between：与交叉轴两端对齐，轴线之间的间隔平均分布space-around：每根轴线的间隔都相等，轴线之间的间隔比轴线与边框的间隔大一倍stretch（默认值）：轴线占满整个交叉轴
# 子元素的属性
下列属性设置在项目上
# order
定义子元素的排列顺序。数值越小,排列越靠前，默认为 0
order：0;（默认值）
# flow-grow
定义子元素的放大比率，默认为`0`，即如果存在剩余空间，也不放大
如果所有子元素的flex-grow属性值都为1，则他们将等分剩余空间（如果有的话）。如果一个子元素的flex-grow为2，其他子元素都为1，则为2的战占据的剩余空间将比其他项多一倍。
flow-grow：0;（默认值）
# flex-shrink
定义子元素的缩小比率，默认为`1`，即如果空间不足，该子元素将缩小（负值无效）
如果所有子元素的flex-shrink属性值都为1，当空喊不足时，都将等比例缩小。如果一个子元素的flex-shrink为0，其他子元素都为1，则空间不足时，为0的不缩小。
flow-shrink: 1 ;(默认值)
# flex-basis
定义了在分配多余空间之前，子元素占据的主轴空间。浏览器根据此属性计算主轴是否有剩余空间。默认值为`atuo`，即元素的本来大小
可以设置跟width和height属性一样的值如350px，即项目将占据固定空间
flex-basis:auto;(默认值auto)
# flex
TIP
此为flex-grow,flex-shrink,flex-basis的简写，默认值为0 1 auto。后两个属性可不写
flex：0 1 auto;默认值flex：none; (0 0 auto)不放大也不缩小，子元素占据本来大小flex：auto; (1 1 auto)存在剩余空间则一起放大，空间不足则一起缩小，子元素占据本来大小flex：1; (1 1 0)存在剩余空间则一起放大，空间不足则一起缩小。子元素大小为0
# align-self
TIP
允许单个元素有与其他元素不一样的对齐方式，可覆盖align-items属性。默认值为auto（继承父元素的align-items属性，如果没有父元素，则等同于stretch）
auto；（默认值）flex-start；整体顶部对齐flex-end；整体底部对齐center；整体垂直居中baseline；元素的第一行文字基线对齐stretch；如果子元素未设置高度，则占满整个容器高度；
# flex:1 与 flex:auto
TIP
flex:1（1 1 0）
flex:1 表示有剩余空间时，自动放大，空间不够时，自动缩小。在分配剩余空间之前，子元素占据主轴的空间大小为0%，
flex:auto（1 1 auto）
flex:auto表示有剩余空间时，自动放大，空间不够时，自动缩小。在分配剩余空间之前，子元素占据主轴的空间大小为元素本来的大小。
区别： flex:auto在考虑剩余空间之前，由于flex-basis:auto会自适应占满所有的剩余空间。此时就没有剩余空间了，在空间缩小时，元素也会自动缩小，其他flex-shrink:1的元素也会跟着缩小（无论是否设置宽度）， 而flex:1表示元素的初始空间大小为0%，除了固定宽度的元素，其余都为剩余空间。则在开始分配剩余空间时，由于flex-grow:1 则会自动占满剩余空间。当空间缩小时，元素也会跟着缩小，直到空间缩小到内容的宽度（如果没有内容，则缩小到0），固定元素的宽度才开始缩小。