flex布局——最后一行左对齐的实现方式(css功能实现)

超、凢脫俗 2022-09-01 14:51 1170阅读 0赞

在学习了`css3`之后，经常会用到的布局就是`flex`布局了。  
比如要实现下图的这种布局：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]

1.  给父级设置`display:flex`;
2.  实现一行中内容靠边对齐，则需要设置`justify-content:space-between;`  
    这样的话，最后一行不填满的情况下，就会出现下面的问题：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]  
    此时则需要对最后一行单独设置了：

下面我分几种情况进行分析：  
对应的`html`部分代码统一如下：

<h2 style="text-align: center">flex布局</h2>
    <div class="wrap">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

## 1.5个一行的布局(指定`width`为数字) ##

.wrap { 
        width: 1100px;
        margin: 20px auto;
        border: 1px solid red;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    .item { 
        width: 200px;
        height: 200px;
        background: green;
        margin-bottom: 10px;
    }
    
    .item:last-child:nth-child(5n - 1) { 
        margin-right: 225px;
    }
    
    .item:last-child:nth-child(5n - 2) { 
        margin-right: 450px;
    }
    
    .item:last-child:nth-child(5n - 3) { 
        margin-right: 675px;
    }

注意上面的代码：由于`class='item'` 对应的`div`标签，宽度是`200px`,父级的宽度为`1100px`,则所有的空隙间距是：`100px`

5个元素有4个空隙，则每个空隙的宽度是`25px`;  
针对最后一行，分有一个元素，有两个元素，有三个元素，有四个元素等；

//当n为1时，5n-1=4，代表是第四个元素，margin-right就是第五个元素的width+1个空隙的宽度
    .item:last-child:nth-child(5n - 1) { 
        margin-right: 225px;
    }
    //当n为1时，5n-2=3，代表是第三个元素，margin-right就是第四个元素的width+第五个元素的width+2个空隙的宽度
    .item:last-child:nth-child(5n - 2) { 
        margin-right: 450px;
    }
    //当n为1时，5n-3=2，代表是第二个元素，margin-right就是第三个元素的width+第四个元素的width+第五个元素的width+3个空隙的宽度
    .item:last-child:nth-child(5n - 3) { 
        margin-right: 675px;
    }

## 2.5个一行的布局(指定`width`为百分比) ##

有很多情况下，元素的宽度是百分数，而非固定的数字宽度，此时则需要计算一下

.wrap { 
        width: 1100px;
        margin: 20px auto;
        border: 1px solid red;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    .item { 
        width: 19%;
        height: 200px;
        background: green;
        margin-bottom: 10px;
    }
    
    .item:last-child:nth-child(5n - 1) { 
        margin-right: calc(19% + 5% / 4);
    }
    
    .item:last-child:nth-child(5n - 2) { 
        margin-right: calc(38% + 10% / 4);
    }
    
    .item:last-child:nth-child(5n - 3) { 
       margin-right: calc(57% + 15% / 4);
    }

注意上面的代码：由于`class='item'` 对应的`div`标签，宽度是`19%`,父级的宽度为`1100px`,则所有的空隙间距是：`5%`

5个元素有4个空隙，则每个空隙的宽度是`5% / 4`;  
针对最后一行，分有一个元素，有两个元素，有三个元素，有四个元素等；

//当n为1时，5n-1=4，代表是第四个元素，margin-right就是第五个元素的width+1个空隙的宽度
    .item:last-child:nth-child(5n - 1) { 
        margin-right: calc(19% + 5% / 4);
    }
    //当n为1时，5n-2=3，代表是第三个元素，margin-right就是第四个元素的width+第五个元素的width+2个空隙的宽度
    .item:last-child:nth-child(5n - 2) { 
         margin-right: calc(38% + 10% / 4);
    }
    //当n为1时，5n-3=2，代表是第二个元素，margin-right就是第三个元素的width+第四个元素的width+第五个元素的width+3个空隙的宽度
    .item:last-child:nth-child(5n - 3) { 
        margin-right: calc(57% + 15% / 4);
    }

## 3.4个一行的布局(指定`width`为百分比) ##

有很多情况下，元素的宽度是百分数，而非固定的数字宽度，此时则需要计算一下

.wrap { 
        width: 1100px;
        margin: 20px auto;
        border: 1px solid red;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    .item { 
        width: 24%;
        height: 200px;
        background: green;
        margin-bottom: 10px;
    }
    
    .item:last-child:nth-child(4n - 1) { 
       margin-right: calc(24% + 4% / 3);
    }
    
    .item:last-child:nth-child(4n - 2) { 
       margin-right: calc(48% + 8% / 3);
    }

注意上面的代码：由于`class='item'` 对应的`div`标签，宽度是`24%`,父级的宽度为`1100px`,则所有的空隙间距是：`4%`

4个元素有3个空隙，则每个空隙的宽度是`25px`;  
针对最后一行，分有一个元素，有两个元素，有三个元素等；

//当n为1时，4n-1=4，代表是第三个元素，margin-right就是第四个元素的width+1个空隙的宽度
    .item:last-child:nth-child(4n - 1) { 
       margin-right: calc(24% + 4% / 3);
    }
    //当n为1时，4n-2=3，代表是第二个元素，margin-right就是第三个元素的width+第四个元素的width+2个空隙的宽度
    .item:last-child:nth-child(4n - 2) { 
       margin-right: calc(48% + 8% / 3);
    }

## 4.4个一行的布局(指定`width`为数字) ##

.wrap { 
        width: 1100px;
        margin: 20px auto;
        border: 1px solid red;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    .item { 
        width: 250px;
        height: 200px;
        background: green;
        margin-bottom: 10px;
    }
    
    .item:last-child:nth-child(4n - 1) { 
       margin-right: 283.3px;
    }
    
    .item:last-child:nth-child(4n - 2) { 
       margin-right: 566.6px;
    }

注意上面的代码：由于`class='item'` 对应的`div`标签，宽度是`250px`,父级的宽度为`1100px`,则所有的空隙间距是：`100px`

4个元素有3个空隙，则每个空隙的宽度是`100px / 3`;  
针对最后一行，分有一个元素，有两个元素，有三个元素等；

//当n为1时，4n-1=4，代表是第三个元素，margin-right就是第四个元素的width+1个空隙的宽度
    .item:last-child:nth-child(4n - 1) { 
       margin-right: 283.3px;
    }
    //当n为1时，4n-2=3，代表是第二个元素，margin-right就是第三个元素的width+第四个元素的width+2个空隙的宽度
    .item:last-child:nth-child(4n - 2) { 
       margin-right: 566.6px;
    }

上面就是4种情况，但是实际过程中，这样写的话，会比较麻烦，关键是`margin-right`的数值需要计算。  
`elementUi`中有对应的`layout`布局可以借用：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]

## `layout`布局实现`flex`布局(4个元素一行) ##

对应的`css`代码：

.el-row.el-row--flex { 
      flex-wrap: wrap;//这行代码让内容换行展示
      .el-col { 
        margin-bottom: 10px;
      }
    }
    .el-row { 
      margin-bottom: 20px;
      &:last-child { 
        margin-bottom: 0;
      }
    }
    .el-col { 
      border-radius: 4px;
    }
    .bg-purple-dark { 
      background: #99a9bf;
    }
    .bg-purple { 
      background: #d3dce6;
    }
    .bg-purple-light { 
      background: #e5e9f2;
    }
    .grid-content { 
      border-radius: 4px;
      min-height: 36px;
    }
    .row-bg { 
      padding: 10px 0;
      background-color: #f9fafc;
    }

最终实现效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]  
但是有个问题，如果一行5个元素，则不太好实现了。  
各有利弊吧。完成！！！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20220829/6dfb8bd3105f42f0993ad7971993a649.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20220829/de5eb3aad30042dbb6b74d701ce1ed00.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20220829/ac618e86462a45a1829e29d651226598.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]: /images/20220829/be4525065756461fb5fc86b63cc0a826.png