title: How do I implement a multi-line flexbox?
body: <p>Despite my Googling, I've found few examples on how to implement multiple line flexboxes. None of the code I've gotten from examples has worked. I have three elements inside a flexbox and I want the first to be on top and the second and third to be on the bottom row.</p>
  
  <pre><code>&lt;div class="flexbox"&gt;
    &lt;div id="element1"&gt;element 1&lt;/div&gt;
    &lt;div id="element2"&gt;element 2&lt;/div&gt;
    &lt;div id="element3"&gt;element 3&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've tried using these properties:</p>
  
  <pre class="lang-css prettyprint-override"><code>.flexbox {
    width: 300px;
    display: box;
    display: -webkit-box;
    display: -moz-box;
    box-lines: multiple;
    flex-wrap: wrap;
  }
  
  #element1 {
    width: 100%;
  }
  </code></pre>
  
  <p>and giving it a set width but it still won't wrap, even if the first element has a width of 100%. Am I missing certain vendor prefixes or is my syntax wrong?</p>