title: Flex Wrap and Evenly Distribute Between Rows
body: <p><a href="https://i.stack.imgur.com/P2vdK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/P2vdK.png" alt="Demonstration of question"></a></p>
  
  <p>Hello.  The image presented above is a menu of buttons (text has been intentionally obfuscated).  The menu functionally moves items to the second row as intended, but it does not evenly space the items between the rows.  I have looked up solutions online, but they either have not worked (both for me, and some even in its own fiddle), or they have been too restricting.  Can anyone recommend a way of making the items split evenly between the two (or more) rows?</p>
  
  <p>Here is the associated CSS:</p>
  
  <pre><code>#tabs {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      background-color: rgb(50,50,50);
      justify-content: space-around;
  }
  
  #tabs button {
      background-color: &lt;?php echo $style['buttonColor']; ?&gt;;
      color: white;
      margin-left: 5px;
      margin-right: 5px;
      margin-top: 10px;
      margin-bottom: 10px;
      padding: 10px;
      font-size: 18px;
      border: 1px solid black;
      -webkit-transition-duration: 0.4s; /* Safari */
      transition-duration: 0.4s;
      cursor: pointer;
  }
  </code></pre>