Question

我有一个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>

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

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

还有可在代码笔https://codepen.io/mobarak/pen/jRjZxB/上找到的代码

在Flex容器的整个宽度上证明内部Flexbox项的合理性

2 个答案: