使用CSS Flexbox的仪表板标题

Question

我想使用CSS Flexbox创建这样的东西:

我通常使用浮点数和大量定位调整来实现这一点,在元素的顶部,底部,左侧和右侧添加边距,填充,百分比值以将其调整到某个视口,但它似乎在不同的视口中断开.

我知道这不是正确的方法,我最终写了太多的CSS,但在不同的视口上看起来仍然不一致.

将徽标完美地放在中心并垂直对齐是我在苦苦挣扎的地方.

这是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>

Answer 1

您只需使用justify-content: space-between并获得正确的间距和align-items: center垂直对齐即可。

\n\n

\r\n

\r\n

.navbar,\r\n.links {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n}

\r\n

<nav class="navbar">\r\n  <div class="sidebar-toggle">\r\n    <button class="sidebar-toggler" type="button">\xe2\x98\xb0</button>\r\n  </div>\r\n  <div class="headerLogo">\r\n    <a href="" class="logo">Logo</a>\r\n  </div>\r\n  <div class="links">\r\n    <div class="headerLinks">\r\n      <a href="">link1</a>\r\n      <a href="">link2</a>\r\n    </div>\r\n    <div class="notifications">\r\n      <div class="mailIcon">Mail</div>\r\n    </div>\r\n  </div>\r\n</nav>

\r\n

\r\n

\r\n

\n\n

如果您希望徽标完美居中，那么您需要将其从元素流中删除position: absolute;

\n\n

\r\n

\r\n

.navbar,\r\n.links {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  position: relative;\r\n}\r\n.headerLogo {\r\n  position: absolute;\r\n  left: 50%;\r\n  top: 50%;\r\n  transform: translate(-50%, -50%);\r\n}

\r\n

<nav class="navbar">\r\n  <div class="sidebar-toggle">\r\n    <button class="sidebar-toggler" type="button">\xe2\x98\xb0</button>\r\n  </div>\r\n  <div class="headerLogo">\r\n    <a href="" class="logo">Logo</a>\r\n  </div>\r\n  <div class="links">\r\n    <div class="headerLinks">\r\n      <a href="">link1</a>\r\n      <a href="">link2</a>\r\n    </div>\r\n    <div class="notifications">\r\n      <div class="mailIcon">Mail</div>\r\n    </div>\r\n  </div>\r\n</nav>

\r\n

\r\n

\r\n

\n