关于flex布局和传统布局

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第4天，点击查看活动详情

前言

相对于一个新的布局的出现，相比于传统布局，flex布局有其独特的优点。传统布局基于盒模型，依赖于position属性，float属性，display属性。那么我们使用一个例子来看各种布局的形式和代码的结构。就用两列布局，左侧固定，右侧自适应。

float布局

float就是使用float属性，让其脱离文档流，浮动在文档之上，右侧是是自适应的话宽度可以使用calc函数。

        body {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .container {
            width: 100vw;
            height: 100vh;
        }
        //清楚浮动
        .container::after,
        .container::before {
            content: "";
            display: block;
            overflow: hidden;
            clear: both;
        }

        .container div {
            height: 100vh;
        }
//左侧使用float
        .leftbox {
            background-color: aqua;
            float: left;
            width: 200px;
        }
        //右侧自适应

        .rightbox {
            background-color: orange;
            margin-left: 200px;
            
        }
    </style>

    <div class="container">
        <div class="leftbox">左边</div>
        <div class="rightbox">右边</div>
    </div>

position布局

position布局和float有点类似，就是把左侧使用的float属性改为position属性

        body {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .container {
            width: 100vw;
            height: 100vh;
            position: relative;
        }

   

        .container div {
            height: 100vh;
        }

        .leftbox {
            background-color: aqua;
            /* float: left; */
            width: 200px;
            position: absolute;
            left: 0;
            bottom: 0;

        }

        .rightbox {
            background-color: orange;
            margin-left: 200px;
            
        }
    </style>

    <div class="container">
        <div class="leftbox">左边</div>
        <div class="rightbox">右边</div>
    </div>

flex布局

Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 .box{display:flex;} 注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。它的所有子元素称为 Flex 项目（flex item），简称”项目”。

        body {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .container {
            width: 100vw;
            height: 100vh;
            display: flex;
        }

   

        .container div {
            height: 100vh;
        }

        .leftbox {
            background-color: aqua;
            width: 200px;
            

        }

        .rightbox {
            background-color: orange;
            flex-grow: 1;//不为0即可
            flex-shrink: 0;
            flex-basis: auto;
                   /* 这三个属性可以简写成flex:1; */
            
        }
    </style>

    <div class="container">
        <div class="leftbox">左边</div>
        <div class="rightbox">右边</div>
    </div>

用flex布局不仅写法简洁，还有一个有点就是可以减少回流和重绘。

• **flex-grow:**flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。代码中设置的是1，其实不设置为0即可。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
• **flex-shrink：**属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
• **flex-basis：**属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

结局

瑞思拜！！！