title: How to make Flexbox span multiple lines?
body: <p>I would like to use CSS <strong>Flexbox</strong> properties to make some sort of grid, where the elements may span across multiple lines.</p>
  
  <p>Here's the essential HTML source code:</p>
  
  <pre><code>&lt;section class="group"&gt;
      &lt;h1&gt;...&lt;/h1&gt;
      &lt;section class="item"&gt;...&lt;/section&gt;
      &lt;section class="item"&gt;...&lt;/section&gt;
      &lt;section class="item"&gt;...&lt;/section&gt;
      &lt;section class="item"&gt;...&lt;/section&gt;
      &lt;section class="item"&gt;...&lt;/section&gt;
      &lt;section class="item"&gt;...&lt;/section&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>Here's what I want to achieve:</p>
  
  <p><img src="https://i.stack.imgur.com/QHT9N.png" alt="enter image description here"></p>
  
  <p>Within the <code>section.group</code>, I want the <code>h1</code> to be 100% wide with each <code>section.item</code> being 50% wide, arranged in a <em>n</em> &times; 2 grid, where <em>n</em> is dependent on the number of inner <code>sections</code>, which may change.</p>
  
  <p>I cannot change the HTML, which means I cannot wrap <code>section.item</code>s with unsemantic <code>div</code>s. I can only use CSS. Here's what I have so far:</p>
  
  <pre><code>.group {
     display: flex;
  }
  .group h1 {}
  .group .item {}
  </code></pre>
  
  <p>(not much of a start)</p>
  
  <p>How can I use the <strong>Flexbox Module</strong> to achieve this?</p>