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

Question

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

当我将“对齐内容”应用于该内部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

我认为你在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>

代码也可在coDepenhttps://codepen.io/mobarak/pen/jRjZxB/

Answer 2

你很接近。我所做的重要更改是设置#链接的宽度

#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>