title: CSS flex, how to display one item on first line and two on the next line
body: <p>This is a pretty simple question, I guess, but I can't get 3 items in the flex container to display in 2 rows, one in the first row and the other 2 in the second row. This is the CSS for the flex container. It displays the 3 items on a single line, obviously :)</p>
  
  <pre><code>div.intro_container {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }
  </code></pre>
  
  <p>If <code>flex-wrap</code> is set to <code>wrap</code>, then the 3 items are displayed in a column. I thought the wrap setting was needed to display container items on several lines. 
  I've tried this CSS for the first container item, intending to have it occupy the whole of the first row, but it didn't work</p>
  
  <pre><code>div.intro_item_1 {
    flex-grow: 3;
  }
  </code></pre>
  
  <p>I've followed <a href="http://css-tricks.com/snippets/css/a-guide-to-flexbox/" rel="noreferrer">the instructions in "CSS-Tricks"</a> but I'm really not sure which combination of commands to use. Any help would be very welcome as I'm puzzled by this.</p>