1含义
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
弹性布局可以使子元素按照规定的规则进行空白空间的分配、对齐和排列;
弹性布局包括两个部分:弹性盒与弹性项(弹性子元素)
采用Flex布局的元素，称为弹性容器(flex container)，简称"弹性盒"。
它的所有子元素自动成为容器成员，称为弹性项目(flex item)，简称"弹性项"
将一个盒子设置成为弹性盒:
display: flex;或display: inline -flex;
2.容器的轴
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)
主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;
交叉轴的开始位置叫做cross start，结束位置叫做cross end。
3.容器属性
flex-direction决定主轴的方向
row (默认值) :主轴为水平方向，起点在左端
row-reverse:主轴为水平方向，起点在右端
column:主轴为垂直方向，起点在上沿
column-reverse:主轴为垂直方向，起点在下沿
flex-wrap是否换行
nowrap (默认) :不换行
wrap:换行，第一行在上方 wrap-reverse :换行，第一行在下方
flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
/* 垂直开始,自动换行 */
flex-direction: column;
flex-wrap: wrap;
/* 从左的反方向开始,从下往上换行 */
flex-direction: row-reverse;
flex-wrap: wrap-reverse; /* 复合元素 */
flex-flow: column wrap-reverse;justify- content 项目在主轴上的对齐方式
flex-start (默认值) : 左对齐
flex- end: 右对齐 center: 居中
space-between: 两端对齐，项目之间的间隔都相等
space-around:（不塌陷）
每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
space- evenly: 均匀排列每个元素，每个元素之间的间隔相等
不设置父盒子宽度自动调节页面宽度
align-items 项目在交叉轴上如何对齐
flex-start: 交叉轴的起点对
flex- end: 交叉轴的终点对齐
center: 交叉轴的中点对齐
baseline: 项目的第一行文字的基线对齐
stretch (默认值) : 如果项目未设置高度或设为auto,将占满整个容器的高度
stretch可以更加方便快捷的设置圣杯布局