flex布局总结

                                     flex弹性布局                              

1、flex api简介

      flex-direction：指定方向，默认值row

      flex-wrap：一条轴线排不下，如何换行,值：nowrap(不换行)|wrap（第一行在上方）|wrap-reverse

      flex-flow：flex-direction flex-wrap的缩写

      justify-content：项目在主轴上的对齐方式 可以实现居中效果

      align-items：项目在交叉轴上的对齐方式 可以实现居中效果

       子元素的api       

   order:属性定义项目的排列顺序。数值越小，排列越靠前，默认为0

   flex-grow：属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大放大比例

   flex-shrink： 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

   flex-basis：px|auot|% 分配空间，它的默认值为auto，自动根据剩余的空间分配

   flex:属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选  一般为1

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

 

参考链接：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html