【发布时间】：2019-10-12 20:52:09
【问题描述】：
导航栏中有6个项目：
前 3 个项目应对齐为
flex-start- 在导航栏的开头。那么 Logo 应该在导航栏的中心
最后 ->
flex-end应该有 2 个图标
这是导航栏当前状态的截图：
问题：是徽标的位置 - 我正在使用 margin-left: '27%'。并且在不同的屏幕尺寸上，logo 并没有很好地对齐。
我想通过flex 调整一些徽标，有没有办法用flex 做到这一点？
检查代码：
HTML/jsx：
<div className="container">
<header className="header">
<nav className="user-nav">
<div className="user-nav-item">
<Link href="/">
<a className="user-nav-item-link">Overview</a>
</Link>
</div>
<div className="user-nav-item">
<Link href="/search">
<a className="user-nav-item-link">Search</a>
</Link>
</div>
<div className="user-nav-item">
<Link href="/feed">
<a className="user-nav-item-link">Feed</a>
</Link>
</div>
<h3 className="logo">Logo</h3>
</nav>
<div className="user-nav-icon">
<div className="user-nav-icon-box">
<img src={bellIcon} alt="notify icon" />
</div>
<div className="user-nav-icon-box">
<img src={settingsIcon} alt="settings icon" />
</div>
</div>
</header>
</div>
CSS：
.container {
max-width: 100vw;
display: flex;
flex-direction: column;
.header {
display: flex;
align-items: center;
height: 5rem;
color: #fff;
background-color: black;
.user-nav {
width: 100%;
display: flex;
align-items: center;
&-item {
width: 5.5rem;
padding: 1.5rem;
cursor: pointer;
}
&-item-link {
text-decoration: none;
color: white;
}
.logo {
margin-left: 27%;
}
&-icon {
display: flex;
align-items: center;
background-color: white;
color: red;
margin-right: 3rem;
& > * {
padding: 0 0.8rem;
cursor: pointer;
}
&-icon-notification {
color: red;
}
}
}
}
}
【问题讨论】：
-
您必须注意，您的徽标不再是您的弹性容器的直接子代。它更像是一个孙子……哈哈！因此，尝试将徽标作为直接子节点放在 flex 容器中。不要将它放在 flex 容器中的另一个元素中。
-
好的，当我将徽标作为容器的子项时，我需要给他一些属性以将他移动到 nabvar 中间
-
在下面试试我的答案。 Flex Box 的问题在于，在容器中，您只能使用 flex-start、flex-end 等方式一次对齐所有项目。因此，请使用不同的方法。请参阅下面的代码，我已经对其进行了测试，它应该适合您。