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>