title: Flexbox - how to make logo in the center and wrap others items around
body: <p>I have following menu (the <code>.logo</code> and <code>.socials</code> are placed inside by JS) and I need to have <code>.logo</code> always in the middle of page having other items equally wrapped around.</p>
  
  <pre><code>&lt;ul class="menu"&gt;
    &lt;li&gt;&lt;a href="/"&gt;Homepage&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="/contact/"&gt;Contact&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="/documentary/"&gt;Documentary&lt;/a&gt;&lt;/li&gt;
    &lt;div class="logo"&gt;&lt;/div&gt;
    &lt;li&gt;&lt;a href="/stories/"&gt;Stories&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="/weddings/"&gt;Weddings&lt;/a&gt;&lt;/li&gt;
    &lt;div class="socials"&gt;
      &lt;a href="https://www.instagram.com"&gt;&lt;i class="sprite-instagram"&gt;i&lt;/i&gt;&lt;/a&gt;
      &lt;a href="https://www.facebook.com"&gt;&lt;i class="sprite-email"&gt;f&lt;/i&gt;&lt;/a&gt;
    &lt;/div&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Centering items using CSS, but I have no clue how to stick the <code>.logo</code> in the middle:</p>
  
  <pre><code>.menu {
    bottom: 0;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    position: relative;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  </code></pre>
  
  <p>Here is the fiddle if you want to have a look: <a href="https://jsfiddle.net/kybernaut/134L25vc/1/" rel="nofollow noreferrer">https://jsfiddle.net/kybernaut/134L25vc/1/</a></p>