flex布局
一 flex是什么？
flexBox 可以为你文章里面的元素提供高效的布局、对齐禾空间的分配方式；即使当你的文档元素的视区和尺寸是动态的或者未知的。
二 缺点：
具有兼容性
三 基本概念
弹性容器 ：设置了display：flex的父元素
弹性盒子元素：包含在弹性容器中的子元素
四 用法：
.flex-container {
display: flex；
//display:inline-flex-(成为内联元素)
}
注意：以下属性均默认主轴为水平方向，交叉轴为垂直方向，使用flex容器内元素，即子元素的float，clear、vertical-align属性将失效。
五 弹性容器的属性：
1 .flex-direction （子元素排列的方向）
row：水平方向，从左至右排列(默认)
row-reverse：水平，从右至左排列
column：竖直方向，上至下排列
column-reverse：竖直，从下至上排列
2、flex-wrap 决定当排列不下时是否换行以及换行的方式
nowrap：排列在一条线上，自动缩小项目，不换行(默认)
wrap：换行，第一行在上
wrap-reverse：换行，第一行在下
3、justify-content（决定item在水平方向上的对齐方式）
flex-start：左对齐
flex-end：右对齐
center：居中对齐
space- between：两端对齐
space-around：沿轴线均匀分布
4、align-items（决定item在垂直方向上的对齐方式）
flex-start：顶端对齐
flex-end：底部对齐
center：竖直方向上居中对齐
baseline：子元素第一行文字的底部对齐
stretch：当子元素未设置高度时，item将和容器等高对齐
5、align-content（垂直方向上有多个子元素------>对子元素整体进行操作-----比较有用）
注意：定义了align-content后，align-items属性将失效。
flex-start：顶部对齐
flex-end：底部对齐
center：居中对齐
space- between：上下两端对齐
space-around：垂直方向上均匀分布
stretch：伸展占满整个盒子---（n列等高对齐）
6、flex-flow：是flex-direction和flex-wrap的简写形式，默认值为row nowrap，即横向排列 不换行。
六、子元素属性
1、order ：值是整数，默认为0，整数越小，子元素排列越靠前
2、flex-grow：定义了当flex容器有多余空间时，子元素是否放大。
默认值为0，即当有多余空间时也不放大；
值为整数，表示不同子元素的放大比例（即占据空间比例）
3、flex-shrink：定义了当容器空间不足时，item是否缩小。
默认值为1，表示当空间不足时，item自动缩小，
值为整数，表示不同item的缩小比例（即占据空间比例）。
与flex-grow相反
4、flex-basis：表示项目在主轴上占据的空间，默认值为auto。
值为npx；类似于width/height，固定宽高的属性
5、flex：是flex-grow、flex-shrink和flex-basis三属性的简写总和。
6、align-self：允许子元素在垂直方向上有自己独特的对齐方式，默认值为auto
auto：和父元素align-self的值一致
flex-start：顶端对齐
flex-end：底部对齐
center：竖直方向上居中对齐
baseline：子元素第一行文字的底部对齐
stretch：当子元素未设置高度时，子元素将和容器等高对齐
