Flex垂直换行布局：移除首列元素左侧多余竖线（动态渲染场景）

针对你遇到的这个问题——在flex-direction: column+flex-wrap: wrap的布局里，给子元素加左边框导致第一列左侧出现多余竖线，而且元素是动态渲染的没法用固定选择器——我有个非常简洁且适配动态场景的解决方案：

最优方案：用Flex Gap + 容器背景色实现分隔线 #

这个方法完全不用给子元素加边框，靠容器的背景色和列间隙来生成自然的列分隔线，不管元素数量怎么变、容器高度怎么调整，都能自动适配。

修改后的代码如下：

CSS代码 #

.flexbox {
  max-height: 200px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  /* 设置列之间的间隙为1px，这就是分隔线的宽度 */
  column-gap: 1px;
  /* 间隙的颜色就是分隔线的颜色 */
  background-color: black;
}
.wrap {
  width: 100px;
  padding: 5px;
  flex-grow: 1;
  /* 用子元素的背景色覆盖容器背景，只露出间隙的分隔线 */
  background-color: white;
}

HTML代码（和原代码一致，无需修改） #

<div class="flexbox">
  <div class="wrap"><span>First item</span></div>
  <div class="wrap"><span>Second item</span></div>
  <div class="wrap"><span>Third item</span></div>
  <div class="wrap"><span>Fourth item</span></div>
  <div class="wrap"><span>Fifth item</span></div>
  <div class="wrap"><span>Sixth item</span></div>
  <div class="wrap"><span>Seventh item</span></div>
  <div class="wrap"><span>Eigth item</span></div>
  <div class="wrap"><span>Nineth item</span></div>
  <div class="wrap"><span>tenth item</span></div>
  <div class="wrap"><span>Eleventh item</span></div>
</div>

为什么这个方案好用？ #

• 完全不需要关心第一列有多少个元素，动态添加/删除元素、调整容器高度时，分隔线会自动跟着布局变化
• 代码比给子元素加边框然后再去排除第一列要简洁得多，没有复杂的CSS选择器
• 分隔线的样式（宽度、颜色）可以直接通过column-gap和容器background-color调整，非常灵活

备选方案：用边框实现（适合必须用边框的场景） #

如果你因为某些原因必须用边框来实现，那可以通过JavaScript计算第一列的元素数量，给第一列的元素添加一个额外的类（比如.no-left-border），然后在CSS里去掉这个类的左边框。不过这个方法需要监听布局变化，相对麻烦，不如第一个方案省心。

内容的提问来源于stack exchange，提问作者Jakeroo