flex布局有关属性整理

一、flex容器属性有：

1. flex-direction:设置主轴方向，可设置的属性值有
   a. row：表示横向排列，从左至右
   b. row-reverse：表示横向排列，从右至左
   c. column：表示纵向排列，从上至下
   d. column-reverse：表示纵向排列，从下至上排列
2. flex-wrap:设置一条轴线排不下如何换行，属性值有
   a.wrap:内容超过后换行
   b.nowrap:不换行，总是在一行显示
   c.wrap-reverse:换行后有两行，reverse就是把两行的排列顺序倒过来
3. justify-content：主轴对齐方式，属性值有
   a.center:中心对齐
   b.flex-start: 左对齐
   c.flex-end:右对齐
   d:space-between:左右两侧没有间距，中间间距相同
   e:space-around:左右两侧的间距为中间间距的一半
4. align-items：交叉轴对齐方式，属性值有
   a：stretch：拉伸
   b：flex-start：上对齐
   c:flex-end:下对齐
   d:center:中心对齐
   e:baseline:基线对齐
5. align-content:多根轴线对齐方式,属性值有
   a：stretch：拉伸
   b：flex-start：上对齐
   c:flex-end:下对齐
   d:center:中心对齐
   e:space-between:上下没有间距，中间各子元素间距相同
   f:space-around:上下间距之和等于中间各个间距

二、flex容器中的flex-item属性有：

1. order:排列顺序
2. flex-grow:放大比例，剩余空间怎么分配
3. flex-shrink :缩小比例，超出空间怎么压缩
4. flex-basis：item所占主轴空间，优先级高于width
5. align-self：对齐方式，覆盖align-items
6. flex：这个属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto，后两个属性可选