让 display:flex 表现得像 display:inline-block
Getting display:flex to behave like display:inline-block
我遇到一个问题，当我的导航项设置为 inline-block 时，子菜单将呈现在相应 <li> 的正下方，如以下两个示例：
和
现在它是一个 inline-flex，它直接渲染在 li 的顶部，覆盖它。
我尝试手动将子菜单 52px 向下定位，但这只是如果 <li> 位于第一行的解决方案，因为一旦它位于第二行，现在就需要104px下来。
有什么好的方法可以解决这个问题吗？
URL 在下方评论
尽管这些是默认值。尝试设置 flex-basis: 0; 并确保 flex-wrap: nowrap; 已设置。正如评论所指示的那样，分享您的代码以获得详细的答案是明智的。
编辑 1：
感谢您对代码的 link。问题现在很清楚了，可以通过给 .navPage-subMenu class 更高的 order 数字来实现解决方案。
但首先请从 class 名称 .navPage-subMenu 中删除 position: absolute，然后添加您喜欢的高于 <li> 的订单价值。示例：
.navPage-subMenu.is-open {
order: 111; /*must be higher than <li> order numbers*/
}
我遇到一个问题，当我的导航项设置为 inline-block 时，子菜单将呈现在相应 <li> 的正下方，如以下两个示例：
和
现在它是一个 inline-flex，它直接渲染在 li 的顶部，覆盖它。
我尝试手动将子菜单 52px 向下定位，但这只是如果 <li> 位于第一行的解决方案，因为一旦它位于第二行，现在就需要104px下来。
有什么好的方法可以解决这个问题吗？
URL 在下方评论
尽管这些是默认值。尝试设置 flex-basis: 0; 并确保 flex-wrap: nowrap; 已设置。正如评论所指示的那样，分享您的代码以获得详细的答案是明智的。
编辑 1：
感谢您对代码的 link。问题现在很清楚了，可以通过给 .navPage-subMenu class 更高的 order 数字来实现解决方案。
但首先请从 class 名称 .navPage-subMenu 中删除 position: absolute，然后添加您喜欢的高于 <li> 的订单价值。示例：
.navPage-subMenu.is-open {
order: 111; /*must be higher than <li> order numbers*/
}