使用 CSS Flexbox 的仪表板标题

Posted 2023-03-07

【中文标题】使用 CSS Flexbox 的仪表板标题

【英文标题】：Dashboard header using CSS Flexbox

【发布时间】：2017-01-02 03:24:20

【问题描述】：

我想使用 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>

【参考方案1】：

您可以只使用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; 将其从元素流中删除

.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>

【参考方案2】：

我稍微修改了您的标记以实现徽标居中。根本不需要使用绝对定位。 我们的想法是最终得到 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%

我在第三个 div 中包含了 .mailIcon 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