弹性布局

任意盒子，设置display属性值为flex，则盒子本身开启弹性布局。
display设为flex的盒子我们称为’弹性容器‘，弹性容器的子元素（孙子不包括）我们称之为’弹性项目‘。关于轴的概念：弹性容器内存在两根轴，分别是主轴和交叉轴，主轴和交叉轴永远是垂直的

css属性名	取值	说明	注意事项
弹性容器
display	flex	开启自身弹性布局	开启弹性布局后自身不会有什么变化，，但是其弹性项目无论之前如何布局，盒子怎样摆放，在变为弹性项目后都变得像浮动一样，具有包裹性，可以设置宽高
flex-wrap	nowrap、wrap、wrap-reverse	设置的弹性项目在主轴上放不下，是否可以换行，是否允许出现多根主轴
flex-direction	row、column、row-reserve、column-reserve	弹性容器控制内部主轴方向
justify-content	stretch、center、space-around、space-between、flex-start、flex-end	弹性项目在主轴上的对齐方式
align-items	stretch、center、flex-start、flex-end	弹性项目在交叉轴上的对齐方式
align-content	stretch、center、space-around、space-between、flex-start、flex-end	当弹性项目存在多根主轴，多根主轴在交叉轴上的对齐方式
弹性项目
flex-grow	0或正整数	当主轴上存在剩余项目弹性布局如何瓜分
flex-basis	auto或任意有效	设置弹性项目参与计算主轴剩余空间的数值
flex-shrink	1或正整数	当主轴上放不下弹性项目时，弹性项目如何缩放
align-self	inherit 、 stretch 、flex-start、 flex-end 、 center	设置自身在交叉轴的对齐方向	会覆盖弹性容器align-items的设置

*开启弹性项目后浮动、清浮动、vertical-align等都无效，不过定位还是可以的