弹性盒布局-direction-wrap-flow

一、弹性盒布局

    简易来讲就是可以伸缩的盒子

    优势:写起来比较简单

       使用灵活且代码简洁

    缺点:不兼容IE和安卓低级版本 

二、使用

    容器      (父元素)

    display:flex------让容器成员是弹性的项目

    flex-direction------决定主轴是什么方向(项目排序方向)

            1、row 横向排列

            2、column 纵向排列

            3、row-reverse 横向翻转

            4、column-reverse 纵向翻转

    flex-wrap------让项目是否换行

          1、nowrap 不换行

          2、wrap 换行

          3、wrap-reverse 换行翻转

    justify-content------横向盒子摆放

            1、flex-start 靠左

            2、flex-end 靠右

            3、center 水平居中

            4、space-between 两端对齐,项目之间的距离都相等

            5、space-around 两端对齐,最两边的距离是项目间距离的一半

    align-items------纵向盒子摆放

            1、flex-start 靠上

            2、flex-end 靠下

            3、center 垂直居中

            4、baseline 项目的第一行文字为基线

            5、stretch 如果容器没有设置高度或者auto则占满整个高度

    容器成员|项目  (子元素)

    (许多元素,要分清楚是给父元素加还是给子元素加)

    order------排序方式,数值越小,排序位置越靠前

    flex-grow------默认值0,比例放大

    flex-shrink------默认值1,比例缩小

    flex-basis------相当于width

    flex------复合(grow + shrink +basis)

       默认值 0 1 auto

       后两个值是可选择 

 

      

上一篇:Less css 技术 快速教程


下一篇:多行文本溢出时出现省略号