如何用Flexbox实现垂直布局？要求每列显示6个元素

嘿，刚好我对Flexbox布局熟得很，这就给你一步步搞定每列显示6个元素的垂直布局需求！

第一步：HTML结构示例 #

先搭个基础的结构，容器里放若干个元素：

<div class="flex-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <!-- 可以继续加更多元素 -->
</div>

第二步：核心CSS实现 #

关键就是给容器设置垂直排列+换行，再固定高度来限制每列的元素数量：

.flex-container {
  display: flex;
  /* 让元素从上到下垂直排列 */
  flex-direction: column;
  /* 当元素总高度超过容器时，自动换行到下一列 */
  flex-wrap: wrap;
  /* 重点：设置成6个item的高度总和（如果有gap要把间距算进去！） */
  height: 350px;
  width: 100%;
  /* 可选：给元素之间加间距，看起来更舒服 */
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
}

.item {
  /* 每个item的固定高度 */
  height: 50px;
  /* 定义每列的宽度 */
  width: 150px;
  background: #f0f0f0;
  /* 让元素内的内容居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

关键属性解释 #

• flex-direction: column：把Flex容器的主轴设置为垂直方向，元素会从上到下排列
• flex-wrap: wrap：这是实现多列的核心，当元素总高度超过容器高度时，会自动换行到新的列
• height: 350px：这里我算上了gap的间距——6个50px的item加上5个10px的gap，刚好是6*50 + 5*10 = 350px，必须算准这个值才能保证每列刚好6个元素

实用注意事项 #

1. 高度计算别漏间距：如果item有margin或者容器用了gap，一定要把这些额外间距算进容器高度里，不然每列的元素数量会乱
2. 响应式适配：如果需要在小屏幕上改成单列显示，加个媒体查询就行：

   @media (max-width: 768px) {
     .flex-container {
       flex-wrap: nowrap;
       height: auto;
     }
   }
   

3. 动态高度的处理：如果item高度不固定，纯CSS很难精准控制每列6个，这时候可以用JavaScript计算前6个item的高度总和，再设置容器高度。不过能固定item高度的话，优先用纯CSS方案更省心

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