弹性盒布局

Posted 2020-12-06 1609359841qq

一、什么是弹性盒布局（可伸缩的盒子）

        

    优势：1》写起来比较简单

          2》灵活性、代码优雅

    缺点：1》不兼容ie和安卓低级版本

新弹性盒(讲)

老弹性盒

二、使用

    

    容器            (父元素)

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

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

                         row    : 横向

                         column : 竖的

                         row-reverse :横向翻转

                         column-reverse ：竖的翻转

        

        flex-wrap      : 让项目是否换行

                        nowrap : 不换行

                        wrap   : 换行

                        wrap-reverse ：换行翻转

        

        flex-flow      : direction wrap

         

        justify-content : 横向盒子摆放

                        flex-start    : 靠左

                        flex-end      : 靠右

                        center        : 水平居中

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

                        space-around  : 每个项目两侧距离相等，两侧距离比项目之间的距离小一倍

        

        algin-items     : 纵向盒子摆放

                        flex-start     : 靠上

                        flex-end       : 靠下

                        center         : 垂直居中

                        baseline       : 项目第一行文字为基线

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

    

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

            

            order       : 排序方式，数值越小，越靠前

            flex-grow   : 默认值0，比例放大

            flex-shrink : 默认值1，比例缩小

            flex-basis  : 相当于width

            flex:       ：复合(grow + shrink + basis)

                        默认值：0 1 auto

                        

                        后俩个值是可选择