CSS flex 一行 4 列布局遇到的问题

开始……

前情提要：列表内容是 1 行 4 列的布局方式。

1. 希望效果（下图所示）

然后我就用了 flex 布局

display: flex
justify-content: space-between复制代码

2. 遇到的问题及原因

因为，列表内容根据 数据 展示，所以 数据 当然不会正好是 4 的倍数。

所以，就有了下图的 2 种布局效果：

3. 解决方法

在列表的末尾添加额外的两个 li ：

// html
<ul class="flex-box">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <!-- 末尾添加的li -->
    <li class="after-add"></li>
    <li class="after-add"></li>
</ul>// css
.flex-box {...}
li {...}
.after-add {
    height: 0;
    padding: 0;
    margin: 0 之前li设定值 0 之前li设定值; 
}复制代码

……结束

转载于:https://juejin.im/post/5c0282f4e51d456ac27b458a