Dashboard header using CSS Flexbox

Question

I want to create something like this using CSS Flexbox:

I usually achieve this using floats and lots of positioning tweaks, adding margins, padding, percentage values on top, bottom, left and right of the elements to adjust it to a certain viewport, but it seem to break-off in different viewports.

I know it is not right way, I end up writing too much CSS and still doesn't look consistent on different viewports.

Getting the Logo perfectly on the center and aligning them vertically is where I'm struggling.

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

You can just use justify-content: space-between and get right spacing and align-items: center for vertical align.

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

If you want logo perfectly centered then you need to remove it from elements flow with 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>

Answer 2

I've slightly modified your markup to achieve the logo centered. There is no need at all to use absolute positioning. The idea is to end up with 3 containers of the same width equaly distributed along the main axis (row), so that the logo can fall just in the middle of the layout.

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

I've included the .mailIcon div in the third div. You can distribute its content internally using similar styling if you need to.

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

You can play around with flexbox with this toy I've created: http://algid.com/Flex-Designer