Javascript 如何在flex display中将元素放在彼此下面？

这是我的密码：

。菜单框{
背景色：白烟；
保证金：自动；
位置：固定；
排名：0；
底部：0；
左：0；
右：0；
边界半径：3px；
宽度：100vh；
高度：60vh；
显示器：flex；
弯曲方向：立柱；
}
.菜单盒体{
柔性生长：1；
显示器：flex；
弯曲方向：行；
柔性包装：包装；
宽度：100%；
}
.菜单\u框\u标题{
高度：45px；
背景色：#f1f1；
边框底部：1px实心#e1e1；
位置：相对位置；
边缘底部：10px；
宽度：100%；
}
.菜单选项{
边框：1px实心#e1e1；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}

{icon}第1部分
{icon}第2部分
{icon}第3部分
{icon}第4部分

您已将display flex添加到.menu\u options元素，该元素引用单元格。这就是为什么这些元素不充当块的原因，就好像您移除了display flex一样，它们将堆叠在彼此的顶部

---

如果您仍然想在那里使用display:flex（例如，要居中放置），您可以添加flex direction:column，这也将使它们相互重叠

如果您在两行下面替换.menu\u box\u body css

flex方向：行；
柔性包装：包装；

下面两行

flex方向：列；
对齐项目：居中；

你会得到结果的。最终CSS将是：

。菜单\u框\u体{
柔性生长：1；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
宽度：100%；
}

如果我删除

显示：flex，则项目将不再居中（垂直）。我已展开回答以解决此问题。您需要声明
弹性方向：列打开
。菜单\u选项
。由于
。菜单选项已设置为
显示：flex，嵌套元素将根据flexbox模型进行布局，而不管您为这些子元素设置了什么显示类型。因此，换句话说，您仍然需要定义flex容器子容器的方向。@UncaughtTypeError thx