Question

我对HTML和CSS很陌生，我遇到了目前正在编码的菜单问题。

我想使用嵌套flexbox制作菜单。它已经接近我想要的但是由于一个我无法理解的原因，儿童flexbox内的justify-content似乎并不适用......

这是我的代码：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

感谢您的帮助！

Answer 1

代码中的justify-content属性正常运行。

问题是您使用display: inline-flex，这使得Flex容器只与内容一样宽，使justify-content没有额外的空间来分发。

尝试使用display: flex或在您的规则中添加width: 100%。

＆＃13;

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%;
}

＆＃13;

<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>

＆＃13;

Answer 2

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

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

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

2 个答案: