Flex 布局实现盒子上下排列：简单示例与详细解释

使用 Flex 布局可以轻松实现盒子上下排列，这篇文章将提供一个简单示例，并详细解释 Flex 属性设置，帮助你理解如何使用 Flex 布局来控制盒子在垂直方向上的排列。

HTML 代码

<div class="container">
  <div class="box">上</div>
  <div class="box">中</div>
  <div class="box">下</div>
</div>

CSS 代码

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 300px;
}
.box {
background-color: #f1f1f1;
text-align: center;
padding: 10px;
}

解释

• display: flex; 将容器设置为 Flex 布局。
• flex-direction: column; 将容器的主轴方向设置为垂直方向，使盒子垂直排列。
• justify-content: space-between; 设置盒子在主轴方向上的对齐方式为两端对齐，使盒子上中下分别排列。
• height: 300px; 设置容器的高度，以便在垂直方向上排列盒子。

通过以上样式设置，盒子将会上下排列，并且上下之间会有一定的空间。