html - grow - flexbox bootstrap 3

Encabezado del tablero utilizando CSS Flexbox

Question

Quiero crear algo como esto usando CSS Flexbox :

Usualmente logro esto usando flotantes y muchos ajustes de posicionamiento, agregando márgenes, relleno, valores porcentuales en la parte superior, inferior, izquierda y derecha de los elementos para ajustarlo a una determinada ventana gráfica, pero parece romperse en diferentes ventanas gráficas.

Sé que no es el camino correcto, termino escribiendo demasiado CSS y todavía no se ve coherente en diferentes ventanas gráficas.

Conseguir el logotipo perfectamente en el centro y alinearlos verticalmente es donde estoy luchando.

Aquí está el código 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

Puede usar justify-content: space-between y obtener espaciado y align-items: center correctos 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>

Si quieres que el logo esté perfectamente centrado, entonces debes quitarlo del flujo de elementos con la 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>