给一个盒子设置弹性布局横向两排纵向两列

可以使用以下代码来实现：

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

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  height: 400px;
}

.item {
  width: 200px;
  height: 150px;
  background-color: #ccc;
  margin-bottom: 20px;
}

这个代码会将 `.container` 设置为弹性布局，并且使用 `flex-wrap: wrap` 让项目换行。使用 `justify-content: space-between` 让项目在主轴上均匀分布，同时使用 `align-items: center` 让项目在交叉轴上居中对齐。每个 `.item` 元素的宽度和高度都已经被预先设置好了，你可以根据自己的需求进行调整。

相关问题

弹性布局让两个盒子水平居中

使用flex布局可以实现两个盒子水平居中。首先，创建一个父级容器，并将其设置为flex布局。然后，使用align-items属性将子项盒子纵向居中排列，使用justify-content属性将子项盒子横向居中排列。接下来，将子项盒子添加到父级容器中。这样，两个盒子就会水平居中于父级容器了。以下是具体的代码示例：

<style>
.father {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 其他样式属性 */
}

.son {
  /* 子项盒子样式 */
}
</style>

<div class="father">
  <div class="son">盒子居中</div>
</div>

这段代码中，`.father`类设置了display为flex，并使用align-items属性将子项盒子纵向居中，使用justify-content属性将子项盒子横向居中。`.son`类为子项盒子的样式。通过这样的设置，两个盒子就会水平居中于父级容器了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [让盒子水平垂直居中的方法小结](https://blog.csdn.net/ddx2019/article/details/106840249)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *3* [父盒子设置弹性布局使子盒子垂直水平居中](https://blog.csdn.net/qq_43359222/article/details/127025332)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]

弹性布局纵向排列并横向居中

可以使用CSS中的flex布局来实现纵向排列并横向居中的弹性布局。假设要排列的元素的class为item，则可以在其父元素的CSS样式中设置如下属性：

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

其中，display: flex; 表示采用flex布局，flex-direction: column; 表示在垂直方向上排列，justify-content: center; 表示在垂直方向上居中对齐，align-items: center; 表示在水平方向上居中对齐。这样设置后，元素就可以纵向排列并横向居中了。