弹性盒布局

Posted 1609359841qq

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了弹性盒布局相关的知识,希望对你有一定的参考价值。

一、什么是弹性盒布局(可伸缩的盒子)
        
    优势: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
                        
                        后俩个值是可选择

以上是关于弹性盒布局的主要内容,如果未能解决你的问题,请参考以下文章

弹性盒布局

深入理解弹性盒布局(fiex-box)——Web前端系列自学笔记

深入理解弹性盒布局(fiex-box)——Web前端系列自学笔记

web布局新方法:弹性盒

弹性盒模型flex

最流行的布局方案 Flex 弹性盒布局详解