如何在一个大盒子里将多个div用flex布局分成上下两行

在HTML和CSS中使用Flexbox布局来在一个大盒子（容器）内将多个`<div>`元素分为上下两行，你可以按照以下步骤操作：

1. **设置容器样式**:
首先，将包含所有`<div>`的主容器设置为`display: flex;`，使其成为一个flex容器。然后，添加`flex-direction: column;`，使得子元素会从上到下堆叠。

<div class="container">
  <!-- 子div将会在这里 -->
</div>

.container {
  display: flex;
  flex-direction: column;
}

2. **对子div应用列属性**:
如果你想让每个`<div>`水平排列并占据整个宽度，可以给它们设置`flex: 1;`，这会使它们平均分配剩余的空间。如果需要保持固定高度，可以设置`height: auto;` 或 `min-height: ...;`。

.child-div {
  flex: 1;
  height: auto; /* 或者 min-height: 100px; (如果你有特定高度需求) */
}

3. **添加更多的div**:
将所需的`<div>`元素作为`.child-div`类的实例添加到`.container`内，比如：

<div class="container">
  <div class="child-div">Div 1</div>
  <div class="child-div">Div 2</div>
  <div class="child-div">Div 3</div>
  <!-- 添加更多div... -->
</div>

现在，`.container`内的`<div>`元素会被自动分成了上下两行。如果想要调整行的数量，只需增加或减少`.child-div`的数量即可。