Flex 布局盒子三级台阶

Flex 布局是一种用于排列和对齐元素的弹性盒子模型。它可以实现各种复杂的布局效果，包括三级台阶。

三级台阶布局可以通过设置不同的 flex 属性和盒子的宽度来实现。下面是一个示例代码：

HTML：

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

CSS：

.container {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
}

.box:first-child {
  flex: 1;
}

.box:nth-child(2) {
  flex: 2;
}

.box:last-child {
  flex: 3;
}

在上面的代码中，.container 是一个 flex 容器，通过设置 justify-content: space-between; 可以使盒子之间的间距相等。align-items: flex-end; 则将盒子的底部对齐。

.box 是 flex 容器中的子元素，通过设置不同的 flex 属性来实现不同的宽度。在这个例子中，第一个盒子的 flex: 1;，第二个盒子的 flex: 2;，第三个盒子的 flex: 3;。这样就实现了三级台阶的效果。

你可以根据实际需求修改盒子的宽度和 flex 属性来调整三级台阶的样式