flex属性

父元素属性

1. display:flex;(定义了一个flex容器)
2. flex-direction(决定主轴的方向)
   1. row（横向 默认值，从左到右）
   2. row-reverse（横向 反转 从右到左）
   3. column（竖直 从上到下）
   4. column-reverse（竖直 从下到上）
3. flex-wrap（是否换行）
   1. nowrap（默认值 不换行）
      2. wrap（换行）
      3. wrap-reverse（倒叙换行 第一排在下面）
4. flex-flow（是flex-direction和flex-wrap的合并简写 row wrap）
5. justify-content（设置主轴方向上的对齐方式 ）
   1. flex-start（默认值、弹性盒子的元素回向起始位置对齐）
   2. flex-end（弹性盒子将会向结束位置对齐）
   3. center（弹性盒子回向中间对齐，该行的子元素也会中间对齐）
   4. space-between（先贴边，再均匀平分剩余空间）
   5. space-around（弹性盒子元素会平均的分布在行内，两端保留子元素和子元素之间的间距的一半）
   6. space-evenly可以使每个元素之间和元素距离边距的距离都相等
6. align-items （设置弹性盒子在垂直主轴元素的对齐方式）
   1. flex-start（垂直于主轴开始位置）
   2. flex-end（垂直于主轴的结束位置）
   3. center（垂直于主轴的中间位置）
   4. baseline（）
   5. stretch（当子盒子没有设置高度时，会拉伸的和父元素一样高）
7. algin-content（设置弹性盒子侧轴的对齐方式 在换行的情况下生效 适用于多行侧轴的排列）
   1. flex-start（垂直主轴开始对齐）
   2. flex-end（垂直主轴结束对齐）
   3. center（垂直主轴中间对齐）
   4. space-around（垂直主轴平分剩空间）
   5. space-between（先贴边再平分剩余空间）
   6. strenth（垂直主轴子元素未设置高度会拉伸与父元素一样高）

子元素的属性

1. order（默认情况下是正常排列，order值越小越靠前，还可以是负数）
2. flex-grow（子元素的占比 类似于flex：1，根据弹性盒子元素所设置的拓展因子作为比率来分配剩余空间）
3. flex-shrink（子元素总宽度大于父元素，子元素跟根据flex-shrink:0 1 2按比率进行搜索，根据弹性盒子设置的收缩因子收缩空间）
4. flex-basic（设置或检索弹性盒子伸缩基值，如果所有子元素的基准值大于剩余空间，则会根据每项设置的基本值，按比例伸缩剩余空间，当他与宽度一起时，一定会把子元素的宽度干掉）
5. flex（flex是felx-grow，flex-shrink，和flex-basic的简写）默认为0 1 auto 后两个为可选

//flex属性意义
flex:none;   // flex:0,0,auto;
flex:auto;  // flex:1,1,auto;
flex:1;    //  flex:1,1,0%;