html – `justify-content`属性不适用于嵌套的flexbox

概述我是 HTML和CSS的新手,我遇到了我正在编码的菜单问题. 我想使用嵌套flexbox制作一个菜单.它越来越接近我想要的但是由于一个我无法理解的原因,儿童flexbox内部的合理内容似乎并不适用…… 这是我的代码： header { display: inline-flex; height: 90px; align-items: center; justify-content: 我是 HTML和CSS的新手,我遇到了我正在编码的菜单问题.

我想使用嵌套flexBox制作一个菜单.它越来越接近我想要的但是由于一个我无法理解的原因,儿童flexBox内部的合理内容似乎并不适用……

这是我的代码：

header {  display: inline-flex;  height: 90px;  align-items: center;  justify-content: flex-start;}.avatar {  display: inline-flex;  height: inherit;  wIDth: 200px;  background-color: #00D717;  align-items: center;  justify-content: space-around;}.avatar h1 {  Font-size: 13px;  text-transform: uppercase;  color: white;}.resteheader {  display: inline-flex;  height: inherit;  justify-content: flex-start;  align-items: center;}.resteheader nav {  display: inline-flex;  height: inherit;  justify-content: space-around;  align-items: center;}.resteheader nav ul {  display: inline-flex;  height: inherit;  justify-content: space-between;  align-items: center;}

<header>  <div >    <img src="img/avatar.png">    <h1>Hoang Nguyen</h1>  </div>  <div >    <nav>      <ul>        <li>          <a href="#">            <img src="img/silhouette.png" alt="">          </a>        </li>        <li>          <a href="#">            <img src="img/bulle.png" alt="">          </a>        </li>        <li>          <a href="#">            <img src="img/cloche.png" alt="">          </a>        </li>      </ul>    </nav>    <img  src="img/logo.png" alt="">    <form>      Type sor search      <input type="text">      <img src="img/loupe.png" alt="">    </form>  </div></header>

谢谢你的帮助 ！

解决方法 代码中的justify-content属性工作正常.

问题是你正在使用display：inline-flex,这使得flex容器只与内容一样宽,使得justify-content没有额外的空间来分发.

尝试使用display：flex或添加宽度：100％的规则.

header {    display: inline-flex;    height: 90px;    align-items: center;    /* justify-content: flex-start;    OFF FOR TESTING */    justify-content: flex-end;         /* WORKING */    wIDth: 100%;}.avatar {    display: inline-flex;    height: inherit;    wIDth: 200px;    background-color: #00D717;    align-items: center;     /* justify-content: space-around;  OFF FOR TESTING */    justify-content: flex-start;      /* WORKING */}.avatar h1 {    Font-size: 13px;    text-transform: uppercase;    color: white;}.resteheader {    display: inline-flex;    height: inherit;    align-items: center;    /* justify-content: flex-start;  OFF FOR TESTING */    justify-content: space-between;  /* WORKING */    wIDth: 100%;}.resteheader nav {    display: inline-flex;    height: inherit;    align-items: center;    /* justify-content: space-around;  OFF FOR TESTING */    justify-content: center;           /* WORKING */    wIDth: 100%;}.resteheader nav ul {    display: inline-flex;    height: inherit;    align-items: center;    /* justify-content: space-between; OFF FOR TESTING */    wIDth: 100%;}

<header>    <div >        <img src="img/avatar.png">        <h1>Hoang Nguyen</h1>    </div>    <div >        <nav>            <ul>                <li>                    <a href="#"><img src="img/silhouette.png" alt=""></a>                </li>                <li>                    <a href="#"><img src="img/bulle.png" alt=""></a>                </li>                <li>                    <a href="#"><img src="img/cloche.png" alt=""></a>                </li>            </ul>        </nav>        <img  src="img/logo.png" alt="">        <form>            Type sor search            <input type="text">            <img src="img/loupe.png" alt="">        </form>    </div></header>

总结

以上是内存溢出为你收集整理的html – `justify-content`属性不适用于嵌套的flexbox全部内容，希望文章能够帮你解决html – `justify-content`属性不适用于嵌套的flexbox所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。