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

Question

我是HTML和CSS的新手,我遇到了我正在编码的菜单问题.

我想使用嵌套flexbox制作一个菜单.它接近我想要的但是由于我无法理解的原因,justify-content儿童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 class="avatar">
    <img src="img/avatar.png">
    <h1>Hoang Nguyen</h1>
  </div>
  <div class="resteHeader">
    <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 class="logo" src="img/logo.png" alt="">
    <form>
      Type sor search
      <input type="text">
      <img src="img/loupe.png" alt="">
    </form>
  </div>
</header>

谢谢你的帮助 !

Answer 1

justify-content您代码中的属性工作正常。

问题是您正在使用display: inline-flex，这使 flex 容器仅与内容一样宽，而justify-content没有额外的空间可供分发。

尝试使用display: flex或添加width: 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 class="avatar">
        <img src="img/avatar.png">
        <h1>Hoang Nguyen</h1>
    </div>

    <div class="resteHeader">
        <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 class="logo" src="img/logo.png" alt="">

        <form>
            Type sor search
            <input type="text">
            <img src="img/loupe.png" alt="">
        </form>
    </div>
</header>

Answer 2

display:inline-flex意味着让你的容器表现得像一个内联元素——即只有它需要的宽度。

除非容器也有宽度（很多容器都没有） ，否则在容器justify-content: space-around上指定是没有意义的display:inline-flexdisplay:inline-flex