如何防止 position:fixed 破坏 flexbox justify-content？答案

【问题标题】：How to prevent position:fixed from breaking flexbox justify-content?如何防止 position:fixed 破坏 flexbox justify-content？
【发布时间】：2021-03-29 18:41:24
【问题描述】：

如何防止父容器的position:fixed 破坏其justify-content 属性？我正在尝试使用 flexbox 创建一个固定的菜单栏。

示例 https://codepen.io/dnguyencode/pen/XWjgxKG

<style>
*{
    border: 1px black solid;
}


.nav{
    display: flex;
    justify-content: space-between;
    // position: fixed;
    height: 100px;

}
</style>
        <div class="nav">
            <div class="nav__logo">
                <img src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="" id="header-img">
            </div>
            <div class="nav__linkList">
                <nav id="nav-bar">
                    <a href="#sect1" class="nav-link">Click Me</a>
                    <a href="#sect2" class="nav-link">Click Me</a>
                    <a href="#sect3" class="nav-link">Click Me</a>
                </nav>
            </div>
        </div>

【问题讨论】：

我不确定导航应该是什么样子，但是如果您从 .nav 中删除 flexbox 并设置为子类 .nav__linkList，那么 flexbox 将适用于所有属性。
你需要给nav指定一个宽度
@Paulie_D 当我指定导航栏的宽度时，它会导致剪辑。你可以在这里看到它：codepen.io/dnguyencode/pen/XWjgxKG
@lortschi 这不是我想要的。导航标签包含徽标图像和导航栏链接，一端带有徽标，另一端带有链接。我希望这两个元素都得到修复。
移除 justify-content: space-between;在 .nav 上并在 .nav__logo 上设置 margin-right: 'your-px-amount'。然后您可以设置徽标和导航之间的确切距离。然后剪裁不再可见。

标签： html css flexbox css-selectors

【解决方案1】：

将宽度 100% 添加到图像，然后它会正确适应。

<style>
*{
    border: 1px black solid;
}
.nav{
    display: flex;
    justify-content: space-between;
    position: fixed;
    width:100%;
    height: 100px;
}
</style>
        <div class="nav">
            <div class="nav__logo">
                <img src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="" id="header-img" width="100%">
            </div>
            <div class="nav__linkList">
                <nav id="nav-bar">
                    <a href="#sect1" class="nav-link">Click Me</a>
                    <a href="#sect2" class="nav-link">Click Me</a>
                    <a href="#sect3" class="nav-link">Click Me</a>
                </nav>
            </div>
        </div>```

【讨论】：

这似乎会导致剪辑。导航栏的一部分丢失了。你知道这里发生了什么吗？ > codepen.io/dnguyencode/pen/XWjgxKG
将宽度 100% 添加到图像，现在图像采用其原始宽度。它应该采用其父 div 的宽度
codepen.io/pranjalkoshti/pen/dypRLeE 在这里查看
你知道如何修复图像并使其具有响应性（根据父容器调整大小。
检查共享的链接，图像是 100% 表示响应，玩弄一下 flex 属性，注意我为 logo div 和 links div resp 添加了 flex 2 和 flex 1，看看它是如何更改图像的尺寸，div 的排列