如何为flex-wrap布局每行的非末尾列表项添加分隔线

方法一：Grid布局（首推） #

这个办法不用手动计算每行的元素数量，不管你加多少列表项、会自动分成多少行，都能完美适配，代码还简洁。

HTML结构 #

<div class="list-container">
  <div class="list-item">列表项1</div>
  <div class="list-item">列表项2</div>
  <div class="list-item">列表项3</div>
  <div class="list-item">列表项4</div>
  <div class="list-item">列表项5</div>
  <!-- 随便加多少个列表项都行 -->
</div>

CSS代码 #

.list-container {
  display: grid;
  /* 这里200px是你要的固定宽度，auto-fill会让容器自动把每行填满 */
  grid-template-columns: repeat(auto-fill, 200px);
  /* 列间距设成分隔线的宽度，容器背景色就是分隔线颜色 */
  column-gap: 1px;
  background-color: #ccc; /* 换成你想要的分隔线颜色 */
  width: 100%; /* 让容器占满父元素宽度 */
}

.list-item {
  background-color: #fff; /* 用列表项的背景色盖住容器的颜色，只留间距处显示分隔线 */
  padding: 8px; /* 可选：加内边距让内容不挤 */
  box-sizing: border-box;
}

方法二：Flexbox布局 #

要是你更习惯用Flexbox，这个方案也能满足需求，同样适配任意行数和列表项数量。

CSS代码 #

.list-container {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden; /* 把每行最后一项的右侧分隔线切掉 */
  width: 100%;
  padding: 0;
}

.list-item {
  flex: 0 0 200px; /* 固定宽度200px，不允许伸缩 */
  box-sizing: border-box;
  padding: 8px;
  margin-right: 1px; /* 用margin-right做分隔线的宽度 */
  background-color: #fff;
}

.list-container {
  background-color: #ccc; /* 分隔线的颜色 */
}

原理说明 #

• Grid方案里，column-gap只会在列表项之间产生空隙，容器的背景色透过空隙就显示成分隔线，每行最后一项右边没有空隙，自然不会有分隔线。
• Flexbox方案是给每个列表项加右侧margin，容器设置overflow: hidden，这样每行最后一项的右侧margin会被容器裁切掉，只有项和项之间会显示出分隔线。

内容的提问来源于stack exchange，提问作者Lourd Nathaniel Gonzalez