1.弹性布局

        1>flex-direction属性

              决定主轴的方向      flex-direction: row | row-reverse | column | column-reverse;

        2>flex-wrap属性 可用来换行

              flex-wrap: nowrap | wrap | wrap-reverse;

        3>justify-content属性 项目在主轴上的对齐方式

              box {justify-content: flex-start | flex-end | center | space-between | space-around;}   

        4>align-items属性  项目在交叉轴上如何对齐

      align-items: flex-start | flex-end |center | baseline | stretch;   

        5>align-content属性 多根轴线的对齐方式      

              align-content: flex-start | flex-end |center | space-between | space-around | stretch;

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

        7>flex-grow属性 项目的放大比例，默认为0 

     flex-grow: <number>; /* default 0 */

8>flex-shrink属性 项目的缩小比例

     flex-shrink: <number>; /* default 1 */

远近互联前端小华整理发布，希望能对学习技术的你有所帮助

远近互联专业提供网站建设、APP开发、网站优化、外贸网站SEO、微信运营的品牌整合营销服务让客户通过网络品牌建立与网络传播提高业绩。