flex布局 justify-content：space-between出现最后一行个数不够布局混乱

爱被打了一巴掌 2022-09-01 09:12 544阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70][]

网上有很多方法是用after伪元素添加，但是有时候浏览器的大小屏导致列数不确定就不能固定添加

**解决方法:放置占位元素,占位元素宽度与其他元素宽度一直,高度为0**

**具体代码：**

注意：

循环的个数：最好是最大列数-1

:key="'a'+a"

key值需要注意  错误原因一个template中有两个一样的v-for 所以需要加一个字符串来区分

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 1][]

css代码：

.tag-list-item-wrap{
                width: 285px;
                height: 56px;
                margin-bottom: 20px;
                padding: 0 20px;
                box-sizing: border-box;
                background: #F3F6FA;
                border-radius: 4px;
                &.temp {
                    height: 0;
                    margin-bottom: 0;
                    border: none;
                    padding: 0;
                }
     }

结果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70]: /images/20220829/136a4b0057ca4805902c90265e2d599b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 1]: /images/20220829/63baec70b3e44c45abcde7f6bce5e392.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 2]: /images/20220829/9bb30757042b41e09eceec5e7c5acd56.png