关于flex-box的学习
<!-- 弹性盒模型 -->
采用Flex布局的元素，称为Flex容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），
简称“项目”任何一个容器都可以指定为Flex布局。
弹性盒模型= 容器+项目
display:
flex
inline-flex;
两者之间的区别类似块级和行内块
注意：使用了flex布局后，子元素的float、clear、vertical-align都会失效
容器属性：
flex-direction 定义项目主轴和主轴方向/排列盒子的方向
row 默认值。横向排列，从左到右
row-reverse 横向反序排列
column 纵向排列，从上到下
column-reverse 纵向反序排列
容器默认有两根轴：主轴、交叉轴
flex-wrap 控制容器是单行还是多行
nowrap 不换行，单行
wrap 超出换行
wrap-reverse 反向wrap排列
flex-flow flex-direction和flex-wrap的简写形式
row nowrap 默认值
flex-start 默认值，左对齐 起点对齐
flex-end 右对齐 终点对齐
center 居中对齐
space-between 两端对齐。项目之间的间隔相等
space-around 每个项目之间的间隔相等，所以项目之间的
间隔比项目与容器边框的间隔大一倍
align-items 定义 项目在交叉轴上的对齐方式（当项目一行或一列使用这个）
flex-start 交叉轴的起点对齐
flex-end 交叉轴的终点对齐
center 交叉轴的中点对齐
baseline 项目的第一行文字的基线对齐
stretch 默认值。如果项目没有定义宽高或者宽高设置成auto，
它会沿着交叉轴占满整个容器的宽度或者是高度
align-content 定义多行项目或多列项目在交叉轴上的对齐方式
当项目多行或多列的时候使用，单行或单列是不起效果的
flex-start 交叉轴的起点对齐
flex-end 交叉轴的终点对齐
center 交叉轴的中点对齐
space-between 与交叉轴两端对齐，项目之间的间隔相等
space-around 项目之间的间隔比项目与边框之间的间隔大一倍
stretch 默认值。没给宽高度的时候，延交叉轴拉伸
注意：使用align-items就不要使用align-content，因为align-content会使align-items失效，
并且align-items的存在会影响align-content的效果
容器默认存在两根轴：水平的主轴和垂直的交叉轴。
主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，
结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
弹性盒模型项目属性：
order 定义项目的排列顺序,默认都是0。可以负值值越小，排列越靠前。同值按顺序
flex-grow 定义项目放大的比例，默认值是0（就算有剩余空间，就是不放大）
子元素的尺寸 = 容器盒子的剩余空间 * （子元素的flex-grow的值/所有子元素flex-grow值总和）+原本的尺寸
flex-shrink 定义项目的缩小比例 不能负值
1 默认值为1（如果容器空间不足，项目会自动等比例缩小）
0 该项目不缩小
flex-basis 定义在分配主轴的多余空间之前，重新分配该项目的主轴空间
px
%
auto 没有特定的宽度值.默认值
content
flex 是flex-grow、flex-shrink和flex-basis简写属性
flex:0 1 auto;
flex:none; = flex: 0 0 auto;
flex:auto; = flex: 1 1 auto;
align-self 单独定义项目与交叉轴的对齐方式
auto 默认值。继承容器的align-items对齐方式
flex-start 起点对齐
flex-end 终点对齐
baseline 文本第一行基线对齐
stretch 默认值。如果项目没有定义宽高或者宽高设置成auto，
它会沿着交叉轴占满整个容器的宽度或者是高度
弹性盒模型容器属性：
flex-directionflex-wrap
flex-flow //简写属性
justify-content
align-items
align-content
弹性盒模型项目属性：
orderflex-grow
flex-shrink
flex-basis
flex 复合属性
align-self