flex布局实现多个盒子平均分布并换行（五个盒子三个一行另外两个换行靠左对齐显示）

ゝ一纸荒年。 2023-01-12 01:56 372阅读 0赞

很多项目布局都会用到多个盒子平均分布并换行，虽然有很多的方法，今天我们在这里用一下flex布局来实现一下，实现效果如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTgyMjg0_size_16_color_FFFFFF_t_70_pic_center]

<template>
       <div class="analysisTask">
             <ul class="chartList">
                 <li></li>
                 <li></li>
                 <li></li>
                 <li></li>
                 <li></li>
             </ul>
       </div>
    </template>
    
    <style lang="scss">
    .analysisTask{ 
       .chartList{ 
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            li{ 
                width: 32%;
                height: 300px;
                margin-top: 20px;
                border-radius: 5px;
                box-shadow:1px 2px 3px 3px #e2e1e1;   
            }
        }
        .chartList:after{   // 使用伪类元素占据单位，不影响页面
            content: "";
            height: 0;
            width: 32%;
        }
    }
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTgyMjg0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221119/92a8c103df404bf296ec0ee96fffad0e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，372人围观）

还没有评论，来说两句吧...

相关阅读

相关弹性布局多列换行居左布局

项目中有碰到一列 3 个及以上的多行布局设置 justify-content: space-between; 后如果满格就是正常显示，如果最后一行少1个就会出现两头

Myth丶恋晨/ 2023年05月29日 11:38/ 0 赞/ 18 阅读

相关 flex布局，最后一行靠左显示

flex布局，最后一行靠左显示 // 最后一行靠左显示 `flex-wrap: wrap;` `align-content: flex-start;` ![在这

墨蓝/ 2023年02月20日 10:55/ 0 赞/ 22 阅读

相关 flex布局实现多个盒子平均分布并换行（五个盒子三个一行另外两个换行靠左对齐显示）

很多项目布局都会用到多个盒子平均分布并换行，虽然有很多的方法，今天我们在这里用一下flex布局来实现一下，实现效果如下图： ![在这里插入图片描述][watermark_t

ゝ一纸荒年。/ 2023年01月12日 01:56/ 0 赞/ 373 阅读

相关 flex布局，均分可换行，左对齐

实现效果 ![在这里插入图片描述][20200806115528879.png] 思路：放大于一排数量的空标签占位。上图其实是这样的，关键点将空标签高度设0，避免

╰半橙微兮°/ 2022年11月24日 14:08/ 0 赞/ 348 阅读

相关 flex平均分布换行后自动对齐

目的效果： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

傷城~/ 2022年11月10日 03:57/ 0 赞/ 398 阅读

相关 c:forEach 一行排三个图片然后自动换行

<body style="margin:0px"> <table width="100%" border="0"> <tr

太过爱你忘了你带给我的痛/ 2022年09月26日 00:27/ 0 赞/ 129 阅读

相关一行显示4个，超出自动换行（解决办法）

先看一下问题吧 ![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6Z2S6KGr5oqY5om

蔚落/ 2022年09月12日 01:55/ 0 赞/ 209 阅读

相关 javascript 怎么实现一行输出5个字符之后换行

js源码： <script> function show(s) { var re= ''; var lengt

秒速五厘米/ 2022年06月07日 10:13/ 0 赞/ 515 阅读

相关 flex让盒子超出两个换行

html写法：注意我这里用的是uni-app的语法，view就是div 其他相同 <view class="abitem"> <view class="

迷南。/ 2021年12月11日 12:47/ 0 赞/ 505 阅读

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

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

- 日理万妓/ 2021年08月26日 22:13/ 0 赞/ 606 阅读