Html `justify content`属性不适用于嵌套的flexbox

我对HTML和CSS非常陌生，我遇到了一个我目前正在编写的菜单问题

我想用嵌套flexbox制作菜单。它越来越接近我想要的，但出于我无法理解的原因，children flexbox中的

justify content

似乎不适用

这是我的密码：

标题{
显示：内联flex；
高度：90px；
对齐项目：居中；
调整内容：灵活启动；
}
.阿凡达{
显示：内联flex；
身高：继承；
宽度：200px；
背景色：#00D717；
对齐项目：居中；
证明内容：周围的空间；
}
.阿凡达h1{
字体大小：13px；
文本转换：大写；
颜色：白色；
}
.重新领导{
显示：内联flex；
身高：继承；
调整内容：灵活启动；
对齐项目：居中；
}
.领班导航{
显示：内联flex；
身高：继承；
证明内容：周围的空间；
对齐项目：居中；
}
.海军总司令{
显示：内联flex；
身高：继承；
证明内容：之间的空间；
对齐项目：居中；
}

黄阮








类型sor搜索

显示：内联flex

意味着使您的容器像内联元素一样工作-即，仅按需要的宽度

---

在

display:inline flex

容器上指定

justify content:space around

是没有意义的，除非容器也有宽度（很多

display:inline flex

容器没有宽度）

代码中的

justify content

属性工作正常

问题是您使用的是

display:inline flex

，这使得flex容器的宽度与内容的宽度相同，从而使

justify content

没有额外的空间来分发

尝试使用

display:flex

或将

width:100%

添加到规则中

标题{
显示：内联flex；
高度：90px；
对齐项目：居中；
/*调整内容：flex开始；关闭以进行测试*/
调整内容：柔性端；/*工作*/
宽度：100%；
}
.阿凡达{
显示：内联flex；
身高：继承；
宽度：200px；
背景色：#00D717；
对齐项目：居中；
/*调整内容：周围留出空间；关闭以进行测试*/
调整内容：flex start；/*正在工作*/
}
.阿凡达h1{
字体大小：13px；
文本转换：大写；
颜色：白色；
}
.重新领导{
显示：内联flex；
身高：继承；
对齐项目：居中；
/*调整内容：flex开始；关闭以进行测试*/
对齐内容：之间的空间；/*工作*/
宽度：100%；
}
.领班导航{
显示：内联flex；
身高：继承；
对齐项目：居中；
/*调整内容：周围留出空间；关闭以进行测试*/
调整内容：中心；/*正在工作*/
宽度：100%；
}
.海军总司令{
显示：内联flex；
身高：继承；
对齐项目：居中；
/*调整内容：间距；关闭以进行测试*/
宽度：100%；
}

黄阮








类型sor搜索

哪个容器？预期的结果是什么？

inlineflex

意味着只将容器设置为需要的宽度。在

inline flex

容器上指定

justify content:space about

是没有意义的，除非它也有一个宽度（很多

inline flex

容器都没有），不要使用inline felx，只使用display:flex；谢谢你的帮助！我用flex而不是内联flex修改了我的代码，并在标题中添加了“宽度：100%；”。现在是否按预期工作？不完全是。。。resteHeader flexbox工作不正常：它应该扩展到整个页面。现在它被塞在左边，就在阿凡达之后（很好用）。（如果我的解释不容易理解，很抱歉，英语不是我的母语。）

resteHeader

正在扩展整个页面。我在它周围绕了一个红色边框以供说明：