弹性盒模型
弹性盒模型的使用方法
为父级元素添加`display: flex;` 或者 `display: inline-flex;
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
flex-direction
flex-direction属性决定主轴的方向，默认为row，即水平方向，起点在左。
子项目按照主轴的方向从起点开始排列。
row，默认值，水平主轴，起点在左；row-reverse，水平主轴，起点在右；column，垂直主轴，起点在上；column-reverse，垂直主轴，起点在下。
flex-wrap
flex-wrap属性决定子元素主轴摆放不下的时候，项目换不换行，默认不换行。
none，默认值，不换行；（摆放不下按比例缩放）wrap，换行，第一排在最前；wrap-reverse，换行，最后一排在最前。
flex-flow
flex-flow属性是flex-direction和flex-wrap的缩写。
默认值为flex-flow: row none;。
justify-content
justify-content属性定义子元素在主轴的对齐方式。
flex-start，默认值，起点对齐；flex-end，终点对齐；center，居中space-between，两端对齐，中间间隔分均分配；space-around，所有间隔分均分配，即所有子元素拥有相同的左右(上下)间隔。
align-items
align-items定义子元素在副轴的对齐方式。
flex-start，副轴起点对齐；flex-end，副轴终点对齐；center，副轴居中对齐；baseline，文本基线对齐stretch，默认值，子元素如果没有设置高度(宽度)，占满整个容器。（如果全部子元素都有设置高度值，则表现和flex-start一致。）
align-content
align-content属性定义多主轴之间（也就是换行后行与行之间）的对齐方式。所以，如果子元素没有换行，这个属性就不起作用。
flex-start，副轴起点对齐；flex-end，副轴终点对齐；center，副轴居中对齐；space-between，副轴两端对齐，中间平均分配；space-around，每行之间间距平均分配；strecth，默认值，如果子元素没有设置高度，则占满对应主轴。（其余5个值中，没有设置高度的子元素和该行最高的高度一样）
子元素属性
-
order
order属性定义子元素（视觉上）的展示顺序，值为一个数字，越小越优先摆放。 -
flex-grow
扫描二维码关注公众号，回复： 12445965 查看本文章
flex-grow属性用于规定 主轴有剩余空间时 子元素增大的分配比例，默认为0，即不增大。 -
flex-shrink
flex-shrink属性用于规定 主轴空间不足时 子元素缩小的分配比例，默认为1，即分均分配来缩小。
-
flex-basis
flex-basis属性定义在分配空间之前，子元素占据的主轴空间大小。默认值auto即元素本来的大小。 -
flex
flex属性是flex-growflex-shrinkflex-basis的简写，默认值就是这三者的默认值flex: 0 1 auto;。最少需要写一个值，后两个值省略。flex有两个特殊值，auto相当于1 1 auto，none相当于0 0 auto。推荐使用优先使用这个属性，而不是单独写三个分解属性，因为浏览器会自动推算相关值。
-
align-self
align-self属性允许子元素自己规定自己的对齐方式。该属性默认继承父级的align-items，可以通过修改各自的align-self实现各个子元素不同的对齐方式。