时间戳

首页 > 解决方案 > 在 flex 容器的整个宽度上对齐内部 Flexbox 项目

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

问题描述

我有一个用于标题导航的 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>

标签： htmlcssflexbox

解决方案

你非常接近。我所做的重要更改是将宽度设置#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>

推荐阅读