flex弹性盒子布局

1.任何一个容器均可以指定flex布局
2.行内元素例如span 也可以使用flex布局 具体操作: display:inline-flex
3.设定flex布局后，子元素的float、clear、vertical-align（垂直对齐）失效

4.父元素flex属性：
水平主轴，垂直交叉轴
1.flex-direction（决定项目的排列方向）
row（默认值）：从左至右排列。
row-reverse：从右至左排列。
column：从上至下排列
column-reverse：从下至上排列。
2.flex-wrap（决定怎么换行）
nowrap（默认）：不换行
wrap：换行，第一行排满。
wrap-reverse：换行，第一行不排满，后面排满。
3.justify-content（决定项目在主轴（水平）上的对齐方式）
flex-start（默认值）：左对齐;
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的中间间隔相等,且间隔是两侧间隔的一倍
4.align-items（项目在垂直上如何对齐）
flex-start：交叉轴的起点对齐（从上至下）。
flex-end：交叉轴的终点对齐（从下至上）。
center：交叉轴的中点对齐。（靠左居中）
baseline: 项目的第一行文字的基线对齐。
stretch：如果项目未设置高度或设为auto，将占满整个容器的高度。
5.子元素flex属性：
1.align-self（允许单个项目有与其他项目不一样的对齐方式）可覆盖align-items属性，继承父类align-items
auto:默认值
flex-start：交叉轴的起点对齐（从上至下）。
flex-end：交叉轴的终点对齐（从下至上）。
center：交叉轴的中点对齐。（靠左居中）
baseline: 项目的第一行文字的基线对齐。
stretch：如果项目未设置高度或设为auto，将占满整个容器的高度。