CSSflex⼀⾏4列布局遇到的问题开始……
前情提要：列表内容是 1 ⾏ 4 列的布局⽅式。
前情提要
1. 希望效果（下图所⽰）
然后我就⽤了 flex 布局
display: flex
justify-content: space-between复制代码
2. 遇到的问题及原因
因为，列表内容根据 数据 展⽰，所以 数据 当然不会正好是 4 的倍数。
所以，就有了下图的 2 种布局效果：
3. 解决⽅法
html的flex布局在列表的末尾添加额外的两个 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设定值;
}复制代码
…
…结束

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。