flex竖向布局，每列2个

在Flex布局中，要实现竖向布局每列两个，可以使用flex-direction: column将容器设置为垂直方向，然后通过调整flex-wrap属性确保布局在容器宽度限制下正确换行。

以下是实现该布局的CSS代码示例：




.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
 
.item {
  width: 50%; /* 每个项占据容器宽度的50% */
}

HTML结构：




<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <!-- 更多的.item元素 -->
</div>

这样.item元素会竖向排列，每列两个。如果添加更多的.item元素，它们会继续按照列排列，每列依然是两个。

flex竖向布局，每列2个

评论已关闭

推荐阅读