flex-direction: column;进行布局

flex-direction: column;可以使得flex容器内的子元素按照垂直方向（从上到下）排列。这种布局方式适合于移动端或者需要竖向排列内容的场景。同时，flex-direction: column;也可以和其他flex属性一起使用，例如justify-content和align-items来控制子元素在flex容器内的对齐方式和间距。以下是一个简单的例子：

HTML代码：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

CSS代码：

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 300px;
  background-color: #f2f2f2;
}

.item {
  padding: 20px;
  margin: 10px;
  background-color: #ccc;
  color: #fff;
  font-size: 24px;
}

在上面的例子中，我们将容器的flex-direction属性设置为column，使得子元素按照垂直方向排列。同时，我们还设置了justify-content和align-items属性来让子元素在flex容器内水平和垂直方向居中对齐。最后，我们对子元素进行了一些样式设置，使得它们有一定的间距和背景色。运行代码，可以看到三个子元素按照垂直方向排列，并且居中对齐。