嵌套的flexbox中`justify-content`属性无效

Question

我对HTML和CSS还比较陌生，目前正在编写菜单时遇到了一个问题。

我想使用嵌套的flexbox来创建菜单。它已经接近我想要的效果，但是出于某种我无法理解的原因，在子Flexbox内的justify-content似乎并没有起作用...

以下是我的代码：

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>

感谢您的帮助！

- Pauline Ziserman

---

哪个容器？期望的结果是什么？ - Oriol

inline-flex 表示使容器的宽度与其内容一样宽。在 inline-flex 容器上指定 justify-content: space-around 是没有意义的，除非它也有一个宽度（而你的很多 inline-flex 容器并没有）。 - Adam Jenkins

不要使用inline-flex，而应该使用display: flex; - CodeWeis

Answer 1

你的代码中的 justify-content 属性已经正常工作。

问题在于你使用了 display: inline-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>

- Michael Benjamin

---

谢谢你的帮助！我已经修改了我的代码，使用了flex而不是inline-flex，并在标题中添加了“width: 100%;”。 - Pauline Ziserman

现在正常工作了吗？ - Michael Benjamin

不完全是这样... resteHeader flexbox 没有正常工作：它应该延伸到整个页面。现在它被藏在左边，就在头像后面（头像本身运行良好）。 （如果我的解释不容易理解，抱歉，英语不是我的母语）。 - Pauline Ziserman

resteHeader正在扩展整个页面。我已经为了说明在它周围包裹了一个红色边框：https://jsfiddle.net/21oazr5z/ - Michael Benjamin

Answer 2

display:inline-flex 意味着使您的容器表现为内联元素，即仅宽度足以容纳其内容。

在 display:inline-flex 容器上指定 justify-content: space-around 是没有意义的，除非容器也有一个宽度（许多您的 display:inline-flex 容器没有）。

- Adam Jenkins