title: Nesting Flexboxes in CSS
body: <p>I'm starting a website for a school project and I though it'd be nice to try out the Flexbox CSS layout.</p>
  
  <p>But I'm having a little problem nesting them with my header, that contains a logo image and a nav bar. Here is the HTML:</p>
  
  <pre><code>&lt;header id="logo-nav"&gt;
    &lt;img src="logo.png" alt="mnml" id="logo"&gt;
    &lt;nav id="navigation"&gt;
      &lt;ul&gt;
        &lt;li class="nav-button"&gt;&lt;a href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
        &lt;li class="nav-button"&gt;&lt;a href="#goals"&gt;Goals&lt;/a&gt;&lt;/li&gt;
        &lt;li class="nav-button"&gt;&lt;a href="#schedules"&gt;Schedules&lt;/a&gt;&lt;/li&gt;
        &lt;li class="nav-button"&gt;&lt;a href="#form"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>What I want to accomplish is to have a third part of the header for the logo and the rest for the navigation links. I though the best way to do that was to make the logo and the nav as boxes inside the header box, but I'd like to make the nav a parent box for the links to treat them as flexible boxes too. My CSS so far:</p>
  
  <pre><code>#logo-nav {
  display: flex;
  display: -moz-flex;
  display: -webkit-flex;
  flex-direction: row;
  -moz-flex-direction: row;
  -webkit-flex-direction: row;
  max-width: 100%;
  margin: 0 auto;
  }
  
  #logo {
  flex:4;
  -moz-flex:4;
  -webkit-flex:4;
  }
  
  #navigation {
  flex:6;
  -moz-flex:6;
  -webkit-flex:6;flex-direction: row;
  -moz-flex-direction: row;
  -webkit-flex-direction: row;
  }
  
  #navigation .nav-button {
  flex:4;
  -moz-flex:4;
  -webkit-flex:4
  
  }
  </code></pre>
  
  <p>But of course that's not working. Any ideas?</p>