使用CSS Flexbox的仪表板页眉
使用CSS Flexbox的仪表板页眉
提问于 2016-08-25 23:47:47
我想使用CSS Flexbox来创建类似这样的东西
我通常使用浮动和大量的定位调整来实现这一点，在元素的顶部、底部、左侧和右侧添加边距、填充和百分比值，以将其调整到某个视口，但它似乎在不同的视口中中断。
我知道这不是正确的方式，我最终写了太多的CSS，并且在不同的视窗上看起来仍然不一致。
让Logo完美地居中并将它们垂直对齐是我努力的地方。
这是HTML代码。
<nav class="navbar">
<div class="sidebar-toggle">
<button class="sidebar-toggler" type="button">☰</button>
</div>
<div class="headerLogo">
<a href="" class="logo">Logo</a>
</div>
<div class="headerLinks">
<a href="">link1</a>
<a href="">link2</a>
</div>
<div class="notifications">
<div class="mailIcon"></div>
</div>
</nav>回答 2
Stack Overflow用户
回答已采纳
发布于 2016-08-25 23:53:10
您可以只使用justify-content: space-between并获得正确的间距和垂直对齐的align-items: center。
.navbar,
.links {
display: flex;
align-items: center;
justify-content: space-between;
}<nav class="navbar">
<div class="sidebar-toggle">
<button class="sidebar-toggler" type="button">☰</button>
</div>
<div class="headerLogo">
<a href="" class="logo">Logo</a>
</div>
<div class="links">
<div class="headerLinks">
<a href="">link1</a>
<a href="">link2</a>
</div>
<div class="notifications">
<div class="mailIcon">Mail</div>
</div>
</div>
</nav>
如果您希望徽标完全居中，则需要使用position: absolute;将其从elements flow中移除
.navbar,
.links {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
}
.headerLogo {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}<nav class="navbar">
<div class="sidebar-toggle">
<button class="sidebar-toggler" type="button">☰</button>
</div>
<div class="headerLogo">
<a href="" class="logo">Logo</a>
</div>
<div class="links">
<div class="headerLinks">
<a href="">link1</a>
<a href="">link2</a>
</div>
<div class="notifications">
<div class="mailIcon">Mail</div>
</div>
</div>
</nav>
Stack Overflow用户
发布于 2018-08-06 04:54:27
我稍微修改了一下您的标记，以实现徽标居中显示。根本不需要使用绝对定位。这个想法是用3个相同宽度的容器均匀地分布在主轴(排)上，这样徽标就可以落在布局的中间。
.navbar{
display:flex;
align-items:center;
}
.sidebar-toggle{
display:flex;
flex-basis:33.3%
}
.headerLogo{
display:flex;
justify-content:center;
flex-basis:33.3%
}
.headerLinks{
display:flex;
justify-content:space-around;
flex-basis:33.3%
}我已经将.mailIcon div包含在第三个div中。如果需要，您可以使用类似的样式在内部分发其内容。
<nav class="navbar">
<div class="sidebar-toggle">
<button class="sidebar-toggler" type="button">☰</button>
</div>
<div class="headerLogo">
<a href="" class="logo">Logo</a>
</div>
<div class="headerLinks">
<a href="">link1</a>
<a href="">link2</a>
<div class="mailIcon"></div>
</div>
</nav>您可以使用我创建的这个玩具来玩flexbox：http://algid.com/Flex-Designer
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39149618
复制相关文章
相似问题