title: Make Unordered list rensponsive with Flex box
body: <p>I have app in which I'm using a flex box to display 8 list items that will dynamically resize with my page. How do I force it to split the items into two rows? (4 per row)?</p>
  
  <p>Here is jsfiddle  : <a href="https://jsfiddle.net/Mwanitete/ge36dcf8/15/" rel="nofollow noreferrer">https://jsfiddle.net/Mwanitete/ge36dcf8/15/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.parent{
    display: flex;
    flex-wrap: wrap;
  }
  .child{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    list-style: none;
    flex: 1 0 20%;
    margin: 5px;
    height: 100px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="parent"&gt;
    &lt;ul class="child"&gt;
      &lt;li&gt;A&lt;/li&gt;
      &lt;li&gt;B&lt;/li&gt;
      &lt;li&gt;C&lt;/li&gt;
      &lt;li&gt;D&lt;/li&gt;
      &lt;li&gt;E&lt;/li&gt;
      &lt;li&gt;F&lt;/li&gt;
      &lt;li&gt;G&lt;/li&gt;
      &lt;li&gt;H&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>