如何在section底部堆叠多个div且不使用独立容器（避免重叠）

无需额外容器，仅通过CSS Flex布局就能让顶部div居上、底部div固定在section底部且自然堆叠，避免重叠问题。

实现代码 #

HTML（保持原有结构） #

<section>
   <div> Div Top 1 </div>
   <div> Div Top 2 </div>
   <div> Div Top 3 </div>

   <div> Div Bottom 1 </div>
   <div> Div Bottom 2 </div>
</section>

CSS #

section {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh; /* 让section至少占满视口高度，可根据需求调整为固定值，比如height: 600px */
}

/* 可选：为底部div添加样式区分 */
section > div:nth-last-child(2),
section > div:last-child {
  background-color: #f0f0f0;
  padding: 12px;
}

原理说明 #

• 将section设为flex容器，flex-direction: column让子元素垂直排列
• justify-content: space-between会自动将顶部的div推至容器顶部，底部的div推至容器底部，中间区域自动留白
• 底部的div作为flex子元素，会按照正常文档流垂直堆叠，不会出现定位导致的重叠问题

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