Flex 布局使盒子上中下从左下到右上排列

使用 Flex 布局可以实现将盒子按照从左下到右上的顺序排列。

HTML 结构如下：

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

CSS 样式如下：

.container {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  height: 300px; /* 设置容器高度 */
}

.box {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin: 10px;
}

在上述代码中，.container 是包裹盒子的容器，设置了 display: flex; 将容器变成一个 Flex 容器。flex-direction: column; 将盒子按照垂直方向排列，justify-content: flex-end; 将盒子向底部对齐，align-items: flex-start; 将盒子向左对齐。

.box 是每个盒子的样式，设置了固定的宽度和高度，并添加了一些间距。

通过以上样式，盒子就会按照从左下到右上的顺序排列在容器中