flex布局总结

flex布局

flex：flexible box 弹性布局
为盒装模型提供最大灵活性，任何一个容器都可以指定flex布局

.box {
     display:flex;
     }

设置后，子元素的float，clear，vertical-align将失效
*项目的排列方向——flex-direction

.box {
      flex-dorection:row/row-reverse/column/column-reserve;
      }

row:水平左端排列
row-reverse：水平右端排列
column：垂直左端排列
column-reverse：垂直右端排列
*flex-wrap 决定子元素是否换行

.box {
     flex-wrap:nowrap/wrap/wrap-reverse;
     }

nowarp：不换行
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方
*flex-flow：以上两者的简写形式
默认值为row，nowrap；

.box {
      flex-flow:flex-direction flex-wrap;
      }

*justify-content 对齐方式

.box {
      justify-content:flex-start(左对齐）/flex-end（右对齐）/
      center/space-between（两端对齐，项目之间间隔相等）/
      spance-around（每个项目两侧的间隔相等）;
      }

*align-content：多根轴线对齐方式（一根轴线不起作用）

.box {
      align-content:flex-start(交叉轴起点对齐）/flex-end（交叉轴终点对齐）/center（交叉轴中点对齐）/space-between（交叉轴两端对齐）/space-around（轴线两侧间隔相等）/stretch（轴线占满整个交叉轴）;
      }

*** 项目属性：order；flex-grow；flex-shrink；flex-basis；flex；align-self
order属性 ：数越小，排列越靠前

.item {
      order:整数；
      }

flex-grow属性 定义项目的放大比例 默认为0（存在剩余空间也不增大）

.item {
      flex-grow:number;
      }

flex-shrink属性 项目的缩小比例 默认为1（空间不足，缩小）

.item {
      flex-shrink:number;
      }

负值对该属性无效
flex-basis属性 定义了在分配多余空间之间，项目占据的主轴空间 默认auto，即本来大小（优先级高于height和width）

.item {
       flex-basis:length/anto
       }

flex属性 是flex-grow；flex-shrink；flex-basis的简写 默认为0；1；auto

.item {
      flex:flex-grow flex-shrink flex-basis;
      }

align-self属性 允许单个项目由于其他项目不一样的对齐方式，可覆盖align-items属性 默认值为auto 如没有父元素，则等同与stretch

.item {
      align-self:auto/flex-start/flex-end/center/baseline/stretch;
      }