Flexbox 不填充宽度答案

【问题标题】：Flexbox not filling widthFlexbox 不填充宽度
【发布时间】：2022-07-05 21:35:38
【问题描述】：

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

这是我的代码：

HTML：

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

CSS：

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

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

header .logo {
    justify-content: left;
}

header nav {
    justify-content: left;
}

感谢您的帮助！

【问题讨论】：

标签： html css flexbox

【解决方案1】：

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

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>

【讨论】：

【解决方案2】：

没有justify-content: left/right

使用margin-left: auto

header {
    width: 100%;
    display: flex;

}

.header-sm {
   margin-left: auto
}

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

【讨论】：