Html 如何使用flexbox使我的顶部块占用额外的空白空间

在我的提琴示例中，是否可以使用flex box，使顶部的粉红色框高度相等，底部的橙色框内容位于顶部框的下方

我尝试将display:flex应用于子元素，但这为底部内容创建了一个新列

.盒式集装箱{ 显示器：flex； } .盒子{ //显示器：flex； 宽度：33%； } .顶{ 背景颜色：粉红色； } .底部{ 背景颜色：橙色； } 盒子1盒子1盒子1盒子1盒子1盒子1盒子1盒子1盒子1盒子1盒子1盒子1盒子1盒子1盒子1盒子1盒子1盒子1盒子1盒子1盒子1盒子1盒子1盒子1盒子1盒子1盒子1盒子1盒子1盒子1盒子1盒子1盒子1盒子1盒子1 第二街区 盒子2盒子2盒子2盒子2盒子2盒子2盒子2盒子2盒子2盒子2盒子2盒子2盒子2盒子2盒子2 第二街区 盒子3盒子3盒子3盒子3盒子3盒子3盒子3盒子3盒子3盒子3盒子3盒子3盒子3盒子3盒子3盒子3盒子3盒子3盒子3盒子3盒子3盒子3盒子3盒子3盒子3盒子3盒子3盒子3盒子3 第二街区 在顶级课程中添加以下内容：

弹性：1

将以下内容添加到box类中

---

哪些盒子是顶部盒子，哪些是底部盒子？顶部盒子是粉红色，底部盒子是橙色。

display:flex;
flex-direction:column;