我正在尝试使用 flexbox 创建这个顶部标题。
基本上我想将 <div class="header-title">
居中(Institution institution 1) 与你看到的其他3个元素一致。 (Institutioner、Ledere 和 Log ud)就像您在图片上看到的那样。
.nav {
background: #e1e1e1;
}
ol, ul {
list-style: none;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
}
.header-title {
justify-content: center;
align-self: center;
display: flex;
}
.nav ul li.logout {
margin-left: auto;
}
.nav ul li a {
text-decoration: none;
padding: 0px 20px;
font-weight: 600;
}
<div class="nav mobilenav">
<div class="header-title">
Institution institution 1
</div>
<ul>
<li><a href="/institutions/">Institutioner</a></li>
<li>
<a href="/leaders/">Ledere</a>
</li>
<li class="logout">
<a class="button-dark" href="/user/logout">Log ud</a>
</li>
</ul>
</div>
最佳答案
使用嵌套的 flex 容器和 flex-grow: 1
。
这允许您在导航栏上创建三个等宽的部分。
然后每个部分变成一个(嵌套的) flex 容器,允许您使用 flex 属性垂直和水平对齐链接。
现在左右元素被固定到容器的边缘,中间元素完全居中(即使左右元素的宽度不同)。
.nav {
display: flex;
height: 50px; /* optional; just for demo */
background: white;
}
.links {
flex: 1; /* shorthand for: flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
display: flex;
justify-content: flex-start;
align-items: center;
border: 1px dashed red;
}
.header-title {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
border: 1px dashed red;
}
.logout {
flex: 1;
display: flex;
justify-content: flex-end;
align-items: center;
border: 1px dashed red;
}
.links a {
margin: 0 5px;
text-decoration: none;
}
<div class="nav mobilenav">
<div class="links">
<a href="/institutions/">Institutioner</a>
<a href="/leaders/">Ledere</a>
</div>
<div class="header-title">Institution institution 1</div>
<div class="logout"><a class="button-dark" href="/user/logout">Log ud</a></div>
</div>
jsFiddle
关于html - 在 flexbox 中左、中、右对齐元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43211390/