title: Change CSS flex direction
body: <p>Is it possible to change the flex direction of blocks from one block to another?</p>
  
  <p>I have a column of blocks (running vertically, obviously) using flex, but in the middle block, of these blocks, there are three smaller inner-blocks that need to run horizontally - and I've tried <code>display: inline-block</code>, and setting their parent to <code>display: flex; flex-direction: row</code>. I've tried setting them to <code>flex: 0</code> and <code>flex: none</code>, but they still display in a column.</p>
  
  <p>So imagine this structure:</p>
  
  <pre><code> 0.body
     -&gt;&gt;1.overall container (has `display: flex; flex-direction: column`)
       -&gt;&gt;2.a label block (vertical, has fixed height)
       -&gt;&gt;2.a label block (vertical, has fixed height)
       -&gt;&gt;2.the container block (vertical, has `flex: 1`)
          -&gt;&gt;3.inner-block one (should be horizontal)
          -&gt;&gt;3.inner-block two (should be horizontal)
          -&gt;&gt;3.inner-block third (should be horizontal)
       -&gt;&gt;2.a label block (vertical, has fixed height)
       -&gt;&gt;2.a label block (vertical, has fixed height)
  </code></pre>
  
  <p>How do I make their parents display vertically and fill the vertical available space, while these three inner-blocks display horizontally with editable widths?</p>