Flexbox logos running amok: Centering an element in a multi-element navigation - css

Question

I've been hacking my way around this issue for a few websites now. It's time to ask in the open.
I have a navigation bar with a few elements. One of them, the logo, needs to stay centered.
I use flexbox. Is it possible to achieve this using flex rules, without resorting to absolute positioning? This never works for me in small screens, as elements will start mounting on top of each other.
Here is a Codepen with the exact problem, followed by my header markup.
<header role="banner">
<button>Button</button>
<h1>
<a href="/">
<img class="logo" src="http://pre04.deviantart.net/239a/th/pre/i/2014/106/6/c/random_logo_by_criticl-d7eqdvw.png" alt="Logo">
</a>
</h1>
<nav role="navigation">
<ul class="primaryNav">
<li>link 1</li>
<li>link 2</li>
</ul>
<ul class="secondaryNav">
<li><svg viewBox="0 0 512 512"><path d="M211.9 197.4h-36.7v59.9h36.7V433.1h70.5V256.5h49.2l5.2-59.1h-54.4c0 0 0-22.1 0-33.7 0-13.9 2.8-19.5 16.3-19.5 10.9 0 38.2 0 38.2 0V82.9c0 0-40.2 0-48.8 0 -52.5 0-76.1 23.1-76.1 67.3C211.9 188.8 211.9 197.4 211.9 197.4z"/></svg></li>
<li><svg viewBox="0 0 512 512"><path d="M179.7 237.6L179.7 284.2 256.7 284.2C253.6 304.2 233.4 342.9 179.7 342.9 133.4 342.9 95.6 304.4 95.6 257 95.6 209.6 133.4 171.1 179.7 171.1 206.1 171.1 223.7 182.4 233.8 192.1L270.6 156.6C247 134.4 216.4 121 179.7 121 104.7 121 44 181.8 44 257 44 332.2 104.7 393 179.7 393 258 393 310 337.8 310 260.1 310 251.2 309 244.4 307.9 237.6L179.7 237.6 179.7 237.6ZM468 236.7L429.3 236.7 429.3 198 390.7 198 390.7 236.7 352 236.7 352 275.3 390.7 275.3 390.7 314 429.3 314 429.3 275.3 468 275.3"/></svg></li>
<li><svg viewBox="0 0 512 512"><path d="M419.6 168.6c-11.7 5.2-24.2 8.7-37.4 10.2 13.4-8.1 23.8-20.8 28.6-36 -12.6 7.5-26.5 12.9-41.3 15.8 -11.9-12.6-28.8-20.6-47.5-20.6 -42 0-72.9 39.2-63.4 79.9 -54.1-2.7-102.1-28.6-134.2-68 -17 29.2-8.8 67.5 20.1 86.9 -10.7-0.3-20.7-3.3-29.5-8.1 -0.7 30.2 20.9 58.4 52.2 64.6 -9.2 2.5-19.2 3.1-29.4 1.1 8.3 25.9 32.3 44.7 60.8 45.2 -27.4 21.4-61.8 31-96.4 27 28.8 18.5 63 29.2 99.8 29.2 120.8 0 189.1-102.1 185-193.6C399.9 193.1 410.9 181.7 419.6 168.6z"/></svg></li>
</ul>
</nav>
</header>

Answer 1

You could wrap the three sections of the banner with a div like this:
<header role="banner">
<div class="banner-block">
...
</div>
<div class="banner-block">
...
</div>
<div class="banner-block">
...
</div>
</header>
The three banner-block flex items can then be evenly spaced across the banner with this CSS:
.banner-block {
width: 33.333% ;
flex: 1 0;
}
And the h1 logo in the middle can be centered using this:
h1 {
margin: 0 auto;
}
See this updated codepen