在 flex 容器的整个宽度上对齐内部 Flexbox 项目答案

【问题标题】：Justify inner Flexbox items across full width of flex container在 flex 容器的整个宽度上对齐内部 Flexbox 项目
【发布时间】：2019-05-01 21:18:05
【问题描述】：

我有一个用于标题导航的 Flexbox，徽标与传统样式一样左对齐，ul 项目右对齐。徽标和导航链接都是全宽 Flexbox 中的 flex 项，我都给了它们 flex: 50%。导航链接部分也是一个 Flexbox（一个内部 Flexbox），以防止菜单堆叠并以更好的响应方式表现。

当我将 justify-content 应用于该内部 Flexbox 时，链接没有变化，就好像有一个覆盖样式或该属性不适用于内部文本框。我希望导航链接在屏幕宽度的 50% 中平均分配。

我曾尝试将 flex: auto 放置在项目上，但无法通过这样做将其保持在当前布局中，并且我尝试摆弄内联元素以查看是否可以删除任何覆盖属性，但没有雪茄。

#nav {
    display: flex;
    flex: 50%;
    align-items: center;
}

#logo {
    margin-right: auto;
    width: 50px;
    height: auto;
}

#links {
    margin-left: auto;
    display: flex;
    justify-content: space-between;
}

#links a {
    text-decoration: none;
}

<nav id="nav">
	<img id="logo" src="https://pngimage.net/wp-content/uploads/2018/06/logo-placeholder-png.png"/>
	<ul id="links">
		<li><a href="#">Link1<a></li>
		<li><a href="#">Link2<a></li>
		<li><a href="#">Link3<a></li>
		<li><a href="#">Link4<a></li>
	</ul>
</nav>

【问题讨论】：

检查元素，看看使用边距会使元素缩小以适应，因此没有空间可以分布

标签： html css flexbox

【解决方案1】：

你已经很接近了。我所做的重要更改是将#links<ul> 的宽度设置为50%，并将justify-content: space-between 添加到容器#nav 包装器中。对ul 进行了一些其他样式更改，因此它没有默认边距和填充，我认为它现在的行为符合您的预期......

#nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#logo {
  width: 50px;
  flex: 0 0 50px;
}

#links {
  width: 50%;
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}

#links a {
  text-decoration: none;
}

<nav id="nav">
	<img id="logo" src="https://pngimage.net/wp-content/uploads/2018/06/logo-placeholder-png.png"/>
	<ul id="links">
		<li><a href="#">Link1</a></li>
		<li><a href="#">Link2</a></li>
		<li><a href="#">Link3</a></li>
		<li><a href="#">Link4</a></li>
	</ul>
</nav>

【讨论】：

【解决方案2】：

我认为flex: 50%; CSS 减速有问题。它不在适当的地方。我已经重新编写了 html 以正确使用它并相应地修复了 CSS。

这是修改后的 CSS

 #nav {
            display: flex;
            background: #eee;
        }

        #nav>#logo,
        #nav>#links {
            flex: 50%;
        }
        #logo img {
            width: 50px;
            height: auto;
        }

        #links {
            display: flex;
            justify-content: space-around;
            list-style-type: none;
        }

        #links a {
            text-decoration: none;
        }

 <nav id="nav">
        <div id="logo"><img src="https://pngimage.net/wp-content/uploads/2018/06/logo-placeholder-png.png" /> </div>
        <ul id="links">
            <li><a href="#">Link1<a></li>
            <li><a href="#">Link2<a></li>
            <li><a href="#">Link3<a></li>
            <li><a href="#">Link4<a></li>
        </ul>
    </nav>

还有 codepen https://codepen.io/mobarak/pen/jRjZxB/ 上提供的代码

【讨论】：