Control Panel Header Using CSS Flexbox

Question

I want to create something like this using CSS Flexbox :

I usually achieve this using floats and a lot of positioning settings, adding margins, indents, percentages at the top, bottom, left and right of the elements to adjust it to a specific viewport, but it seems to interrupt in different viewports.

I know that this is not correct, I end up writing too much CSS and still do not look consistent in different viewports.

Getting the logo in the center and aligning it vertically is where I'm afraid.

Here is the HTML code.

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

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