CSS 如何使用 “flex-flow: column wrap”

在本文中，我们将介绍如何使用 CSS 的 “flex-flow: column wrap” 属性。这个属性可以帮助我们实现垂直方向自动换行的布局效果。我们将通过示例代码来详细说明其用法和效果。

阅读更多：CSS 教程

什么是 flex-flow: column wrap？

flex-flow 是一个用于设置 flex 布局的简写属性，包括了 flex-direction 和 flex-wrap 两个属性。其中，flex-direction 定义了 flex 元素的主轴方向，而 flex-wrap 则定义了 flex 元素的换行方式。

flex-direction 属性有以下几个可能的值：
– row：默认值，元素水平排列
– row-reverse：将元素水平颠倒排列
– column：元素垂直排列
– column-reverse：将元素垂直颠倒排列

flex-wrap 属性有以下几个可能的值：
– nowrap：默认值，不换行
– wrap：元素自动换行
– wrap-reverse：元素自动换行，并将行反序排列

通过将 flex-direction 设置为 column，并将 flex-wrap 设置为 wrap，我们可以创建一个垂直方向上自动换行的布局。

以下是一个示例代码：

.container {
  display: flex;
  flex-flow: column wrap;
  height: 200px;
}

.item {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: #f0f0f0;
}

<div class="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 class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
</div>

在这个示例中，我们创建了一个高度为 200px 的容器，并将其内部的子元素设置为宽高都为 100px 的方块。通过设置容器的 flex-flow 属性为 “column wrap”，我们使得子元素在超过容器高度时自动换行排列。