html - 在 flex 容器的整个宽度上对齐内部 Flexbox 元素

Question

我有一个用于标题导航的 Flexbox， Logo 左对齐，ul 元素右对齐，就像传统样式一样。 Logo 和导航链接都是全宽 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>

Answer 1

你很接近。我所做的重要更改是设置 #links 的宽度<ul>到 50% 并添加 justify-content: space-between到容器 #nav wrapper 。 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>