Flexbox不填充宽度

Question

我目前正在尝试使用FlexBox创建标头。但是，我试图将两个容器与最左边的两个容器对齐，而一个div向右对齐，但似乎并没有弹性箱容器填充宽度的100％。这会导致问题，因为我无法将DIV一直推向右侧。我该如何解决？

header {
  width: 100%;
  display: flex;
  flex-direction: row;
}

header .header-sm {
  justify-content: right;
}

header .logo {
  justify-content: left;
}

header nav {
  justify-content: left;
}

<header>
  <div class="logo"></div>
  <nav></nav>
  <div class="header-sm"></div>
</header>

感谢您的帮助！

Answer 1

Jusify-content只能放置在Flex容器级别上，

但在您的情况下，如果您想将特定物品对齐在容器右侧的特定项目，则可以使用Margin-Left播放：auto

header {
    width: 100%;
    display: flex;
    flex-direction: row;
    background: red;
}

header * {
  margin: 5px;
  border: solid 1px blue;
}

header .header-sm {
    margin-left: auto
}

<header>
   <div class="logo">test</div>
   <nav>test</nav>
   <div class="header-sm">test</div>
</header>