css - 使用flex布局各个盒子平均分布（五个盒子中三个盒子占一行另两个换行靠左对齐）

- 日理万妓 2021-08-26 22:13 591阅读 0赞

在做一些类似商城的项目中，我们会时常遇到类似 五个模块中三个模块占一行，另外外两个换到下一行靠左对齐这样的情况。下面我通过案例来实现以下这个效果：

### 效果图： ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 1]

### 案例如下： ###

<template>
        <div class="test">
            <ul>
                <li v-for="(item,index) in list" :key="item+index"></li>
            </ul>
        </div>
    </template>
    <script>
    export default {
        data() {
            return {
                list:[1,1,1,1]  // 根据数组条数控制有几个盒子
            }
        },
    }
    </script>
    <style lang="less">
        .test {
            ul {
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                text-decoration: none;
                li {
                    margin-top: 10px;
                    width: 32%;
                    height: 100px;
                    border: 1px solid #333333;
                    background-color: skyblue;
                }
            }
    
            ul:after{  // 使用伪类元素占据单位，不影响页面
                content: "";
                height: 0;
                width: 32%;
            }
        }
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70]: /images/20210813/7ec1e587bd5d42a483a115e198641fab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70 1]: /images/20210813/595d06721d874aaaa3463b65bc8cba62.png