如何在垂直排列的flex container后方添加浅灰色网格线？

给Flex容器后方添加浅灰色线条，推荐以下几种简洁的实现方式，无需额外嵌套Flex容器：

方法1：使用CSS伪元素（无额外DOM元素） #

通过给目标Flex容器添加::after伪元素生成线条，无需修改HTML结构：

HTML结构 #

<div class="flex-container">
  <div class="flex-item">项目1</div>
  <div class="flex-item">项目2</div>
  <div class="flex-item">项目3</div>
</div>

CSS样式 #

.flex-container {
  display: flex;
  flex-direction: column; /* 从上到下排列 */
  position: relative; /* 为伪元素定位做准备 */
  padding-bottom: 10px; /* 给线条留出间距，避免紧贴内容 */
}

.flex-container::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px; /* 线条粗细 */
  background-color: #eee; /* 浅灰色 */
}

.flex-item {
  padding: 8px;
  margin: 4px 0;
  border: 1px solid #ddd;
}

方法2：添加独立的线条元素 #

如果需要更灵活的控制（比如调整线条与容器的间距、添加左右边距），可以直接在Flex容器后添加专门的线条元素：

HTML结构 #

<div class="flex-container">
  <div class="flex-item">项目1</div>
  <div class="flex-item">项目2</div>
  <div class="flex-item">项目3</div>
</div>
<div class="divider"></div>

CSS样式 #

.flex-container {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px; /* 容器与线条的间距 */
}

.divider {
  width: 100%;
  height: 1px;
  background-color: #eee;
  /* 可选：添加左右边距，让线条比容器短一些 */
  /* margin: 0 10px; */
}

.flex-item {
  padding: 8px;
  margin: 4px 0;
  border: 1px solid #ddd;
}

方法3：利用边框实现（适合线条紧贴容器的场景） #

如果希望线条直接贴在Flex容器底部，也可以直接给容器添加底部边框：

.flex-container {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

以上三种方法都能实现你需要的效果，可根据实际布局需求选择。

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