title: Flexbox challenge: how to get row wrapping with children identical and uniform margins in full rows
body: <p>Ok, so I want to use flexbox to create a grid of perfectly uniform children that uses the screen size to determine the width of the children and how many to place on a row..  </p>
  
  <p>Things I want to be uniform: </p>
  
  <ol>
  <li>The width of all children. The should be identical in all rows and
  determined by "full" rows. </li>
  <li>All margins in "full" rows must be uniform both between children and on the outer left and right sides.</li>
  <li>At least the height of all children in the same row (if some rows are taller than others it is ok, although the best implementation would indeed make all rows identical heights). </li>
  <li>The text should be vertically centered in all children.</li>
  </ol>
  
  <p>I want to have the items center in the final row if it is not filled, so on that row, it is fine (and indeed preferred) if the extreme margins outside of the children are larger on the left and the right. </p>
  
  <p>I have three solutions that get close but nothing that hits the mark.  </p>
  
  <ol>
  <li>This version has everything I want except for the width of the children. If you notice the extreme left and right margins are larger than those between the children on the full rows. Ideally, I would like the children stretch enough so that their margins on full rows are identical both on the sides (outside of the group) and between the children, and then apply that same width to the overflowing children on the final row (who can have larger margins on the left and right).</li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#container{
    list-style-type: none !important;
    display: flex;
   flex-flow: row wrap;
   justify-content:center;
   /*style*/
   padding: 0.5em;
   background-color: royalblue;
  
  }
  
  .child {
    display: flex;
     justify-content: center;
     align-items: center;
     /*style*/
     margin: 0.5em;
     padding: 1em;
   /*  min-height: 80px;*/
     width: 100px;
     background-color: lightblue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul id ="container"&gt;
          &lt;li class ="child"&gt;&lt;a href="http://www.google.com"&gt;&lt;span class="tf"&gt;&lt;/span&gt;&lt;div class="tf2"&gt;Name 1&lt;br&gt;location&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class ="child"&gt;&lt;a href="http://www.google.com"&gt;&lt;span class="tf"&gt;&lt;/span&gt;&lt;div class="tf2"&gt;Name 1&lt;br&gt;location&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class ="child"&gt;&lt;a href="http://www.google.com"&gt;&lt;span class="tf"&gt;&lt;/span&gt;&lt;div class="tf2"&gt;Name 1&lt;br&gt;location&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class ="child"&gt;&lt;a href="http://www.google.com"&gt;&lt;span class="tf"&gt;&lt;/span&gt;&lt;div class="tf2"&gt;Name 1&lt;br&gt;location&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class ="child"&gt;&lt;a href="http://www.google.com"&gt;&lt;span class="tf"&gt;&lt;/span&gt;&lt;div class="tf2"&gt;Name 1&lt;br&gt;location&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class ="child"&gt;&lt;a href="http://www.google.com"&gt;&lt;span class="tf"&gt;&lt;/span&gt;&lt;div class="tf2"&gt;Name 1&lt;br&gt;location&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class ="child"&gt;&lt;a href="http://www.google.com"&gt;&lt;span class="tf"&gt;&lt;/span&gt;&lt;div class="tf2"&gt;Name 1&lt;br&gt;location&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class ="child"&gt;&lt;a href="http://www.google.com"&gt;&lt;span class="tf"&gt;&lt;/span&gt;&lt;div class="tf2"&gt;Name 1&lt;br&gt;location&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class ="child"&gt;&lt;a href="http://www.google.com"&gt;&lt;span class="tf"&gt;&lt;/span&gt;&lt;div class="tf2"&gt;Name 1&lt;br&gt;location&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class ="child"&gt;&lt;a href="http://www.google.com"&gt;&lt;span class="tf"&gt;&lt;/span&gt;&lt;div class="tf2"&gt;Name 1&lt;br&gt;location&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class ="child"&gt;&lt;a href="http://www.google.com"&gt;&lt;span class="tf"&gt;&lt;/span&gt;&lt;div class="tf2"&gt;Name 1&lt;br&gt;location&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class ="child"&gt;&lt;a href="http://www.google.com"&gt;&lt;span class="tf"&gt;&lt;/span&gt;&lt;div class="tf2"&gt;Name 1&lt;br&gt;location&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class ="child"&gt;&lt;a href="http://www.google.com"&gt;&lt;span class="tf"&gt;&lt;/span&gt;&lt;div class="tf2"&gt;Name 1&lt;br&gt;location&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class ="child"&gt;&lt;a href="http://www.google.com"&gt;&lt;span class="tf"&gt;&lt;/span&gt;&lt;div class="tf2"&gt;Name 1&lt;br&gt;location&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class ="child"&gt;&lt;a href="http://www.google.com"&gt;&lt;span class="tf"&gt;&lt;/span&gt;&lt;div class="tf2"&gt;Name 1&lt;br&gt;location&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class ="child"&gt;&lt;a href="http://www.google.com"&gt;&lt;span class="tf"&gt;&lt;/span&gt;&lt;div class="tf2"&gt;Name 1&lt;br&gt;location&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class ="child"&gt;&lt;a href="http://www.google.com"&gt;&lt;span class="tf"&gt;&lt;/span&gt;&lt;div class="tf2"&gt;Name 1&lt;br&gt;location&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class ="child"&gt;&lt;a href="http://www.google.com"&gt;&lt;span class="tf"&gt;&lt;/span&gt;&lt;div class="tf2"&gt;Name 1&lt;br&gt;location&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class ="child"&gt;&lt;a href="http://www.google.com"&gt;&lt;span class="tf"&gt;&lt;/span&gt;&lt;div class="tf2"&gt;Name 1&lt;br&gt;location&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class ="child"&gt;&lt;a href="http://www.google.com"&gt;&lt;span class="tf"&gt;&lt;/span&gt;&lt;div class="tf2"&gt;Name 1&lt;br&gt;location&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class ="child"&gt;&lt;a href="http://www.google.com"&gt;&lt;span class="tf"&gt;&lt;/span&gt;&lt;div class="tf2"&gt;Name 1&lt;br&gt;location&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class ="child"&gt;&lt;a href="http://www.google.com"&gt;&lt;span class="tf"&gt;&lt;/span&gt;&lt;div class="tf2"&gt;Name 1&lt;br&gt;location&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class ="child"&gt;&lt;a href="http://www.google.com"&gt;&lt;span class="tf"&gt;&lt;/span&gt;&lt;div class="tf2"&gt;Name 1&lt;br&gt;location&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <ol start="2">
  <li>This version has the width/margin right, but the text is not vertically centered when one box has more text than the others in its row.</li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  li {
    min-width: 40px;
    text-align: center;
    flex-grow: 1;
    flex-basis: 100px;
    max-width: 100%;
  }
  @media (min-width: 200px) {
    li {
      max-width: 50%;
    }
  }
  @media (min-width: 300px) {
    li {
      max-width: 33.33333%;
    }
  }
  @media (min-width: 400px) {
    li {
      max-width: 25%;
    }
  }
  @media (min-width: 500px) {
    li {
      max-width: 20%;
    }
  }
  @media (min-width: 600px) {
    li {
      max-width: 16.66667%;
    }
  }
  @media (min-width: 700px) {
    li {
      max-width: 14.28571%;
    }
  }
  @media (min-width: 800px) {
    li {
      max-width: 12.5%;
    }
  }
  @media (min-width: 900px) {
    li {
      max-width: 11.11111%;
    }
  }
  @media (min-width: 1000px) {
    li {
      max-width: 10%;
    }
  }
  @media (min-width: 1100px) {
    li {
      max-width: 9.09091%;
    }
  }
  @media (min-width: 1200px) {
    li {
      max-width: 8.33333%;
    }
  }
  @media (min-width: 1300px) {
    li {
      max-width: 7.69231%;
    }
  }
  @media (min-width: 1400px) {
    li {
      max-width: 7.14286%;
    }
  }
  @media (min-width: 1500px) {
    li {
      max-width: 6.66667%;
    }
  }
  @media (min-width: 1600px) {
    li {
      max-width: 6.25%;
    }
  }
  @media (min-width: 1700px) {
    li {
      max-width: 5.88235%;
    }
  }
  @media (min-width: 1800px) {
    li {
      max-width: 5.55556%;
    }
  }
  @media (min-width: 1900px) {
    li {
      max-width: 5.26316%;
    }
  }
  @media (min-width: 2000px) {
    li {
      max-width: 5%;
    }
  }
  @media (min-width: 2100px) {
    li {
      max-width: 4.7619%;
    }
  }
  
  ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  ul {
    background-color: tomato;
  }
  
  li .content {
    margin: 0.5em;
    background-color: darkgreen;
  }
  li img {
    width: 100%;
    opacity: 0.5;
  }
  li figure, li img {
    margin: 0;
    padding: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;ul&gt;
        &lt;li&gt;
          &lt;div class="content"&gt;
            hi there
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;div class="content"&gt;
            hi there
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;div class="content"&gt;
            hi there
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;div class="content"&gt;
            hi there
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;div class="content"&gt;
            hi there
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;div class="content"&gt;
            hi there
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;div class="content"&gt;
            hi there
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;div class="content"&gt;
            hi there
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;div class="content"&gt;
            hi there
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;div class="content"&gt;
            hi there
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;div class="content"&gt;
            hi there
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;div class="content"&gt;
            hi there
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;div class="content"&gt;
            hi there
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;div class="content"&gt;
            hi there
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;div class="content"&gt;
            I am taller then the other children on this row        &lt;/div&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;div class="content"&gt;
            hi there
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;div class="content"&gt;
            hi there
          &lt;/div&gt;
        &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <ol start="3">
  <li>This version, gets the margins and heights right, but it doesn't keep the widths of children in the unfilled rows the same size as the widths in the children of the filled rows.  <strong>This is actually very important.</strong> I'd prefer the first version (with unequal side margins), over this. </li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>ul, li {
    border: 1px solid black;
  }
  #container{
    list-style-type: none !important;
    display: flex;
   flex-flow: row wrap;
   justify-content:center;
  
   /*style*/
   padding: 0.5em;
   background-color: royalblue;
  
  }
  
  .child {
    display: flex;
     justify-content: center;
     align-items: center;
     /*style*/
     margin: 0.5em;
     padding: 1em;
     min-height: 80px;
    min-width: 80px;  
    flex-grow: 1;
    /* width: 25%;*/
     background-color: lightblue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul id ="container"&gt;
          &lt;li class ="child"&gt;&lt;a href="http://www.google.com"&gt;&lt;span class="tf"&gt;&lt;/span&gt;&lt;div class="tf2"&gt;Name 1&lt;br&gt;location&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class ="child"&gt;&lt;a href="http://www.google.com"&gt;&lt;span class="tf"&gt;&lt;/span&gt;&lt;div class="tf2"&gt;Name 1&lt;br&gt;location&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class ="child"&gt;&lt;a href="http://www.google.com"&gt;&lt;span class="tf"&gt;&lt;/span&gt;&lt;div class="tf2"&gt;Name 1&lt;br&gt;location&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class ="child"&gt;&lt;a href="http://www.google.com"&gt;&lt;span class="tf"&gt;&lt;/span&gt;&lt;div class="tf2"&gt;Name 1&lt;br&gt;location&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class ="child"&gt;&lt;a href="http://www.google.com"&gt;&lt;span class="tf"&gt;&lt;/span&gt;&lt;div class="tf2"&gt;Name 1&lt;br&gt;location&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class ="child"&gt;&lt;a href="http://www.google.com"&gt;&lt;span class="tf"&gt;&lt;/span&gt;&lt;div class="tf2"&gt;Name 1&lt;br&gt;location&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class ="child"&gt;&lt;a href="http://www.google.com"&gt;&lt;span class="tf"&gt;&lt;/span&gt;&lt;div class="tf2"&gt;Name 1&lt;br&gt;location&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class ="child"&gt;&lt;a href="http://www.google.com"&gt;&lt;span class="tf"&gt;&lt;/span&gt;&lt;div class="tf2"&gt;Name 1&lt;br&gt;location&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class ="child"&gt;&lt;a href="http://www.google.com"&gt;&lt;span class="tf"&gt;&lt;/span&gt;&lt;div class="tf2"&gt;Name 1&lt;br&gt;location&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class ="child"&gt;&lt;a href="http://www.google.com"&gt;&lt;span class="tf"&gt;&lt;/span&gt;&lt;div class="tf2"&gt;Name 1&lt;br&gt;location&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class ="child"&gt;&lt;a href="http://www.google.com"&gt;&lt;span class="tf"&gt;&lt;/span&gt;&lt;div class="tf2"&gt;Name 1&lt;br&gt;location&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class ="child"&gt;&lt;a href="http://www.google.com"&gt;&lt;span class="tf"&gt;&lt;/span&gt;&lt;div class="tf2"&gt;Name 1&lt;br&gt;location&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class ="child"&gt;&lt;a href="http://www.google.com"&gt;&lt;span class="tf"&gt;&lt;/span&gt;&lt;div class="tf2"&gt;Name 1&lt;br&gt;location&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class ="child"&gt;&lt;a href="http://www.google.com"&gt;&lt;span class="tf"&gt;&lt;/span&gt;&lt;div class="tf2"&gt;Name 1&lt;br&gt;location&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class ="child"&gt;&lt;a href="http://www.google.com"&gt;&lt;span class="tf"&gt;&lt;/span&gt;&lt;div class="tf2"&gt;Name 1&lt;br&gt;location&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class ="child"&gt;&lt;a href="http://www.google.com"&gt;&lt;span class="tf"&gt;&lt;/span&gt;&lt;div class="tf2"&gt;Name 1&lt;br&gt;location&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class ="child"&gt;&lt;a href="http://www.google.com"&gt;&lt;span class="tf"&gt;&lt;/span&gt;&lt;div class="tf2"&gt;Name 1&lt;br&gt;location&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class ="child"&gt;&lt;a href="http://www.google.com"&gt;&lt;span class="tf"&gt;&lt;/span&gt;&lt;div class="tf2"&gt;Name 1&lt;br&gt;location&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class ="child"&gt;&lt;a href="http://www.google.com"&gt;&lt;span class="tf"&gt;&lt;/span&gt;&lt;div class="tf2"&gt;Name 1&lt;br&gt;location&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class ="child"&gt;&lt;a href="http://www.google.com"&gt;&lt;span class="tf"&gt;&lt;/span&gt;&lt;div class="tf2"&gt;Name 1&lt;br&gt;location&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class ="child"&gt;&lt;a href="http://www.google.com"&gt;&lt;span class="tf"&gt;&lt;/span&gt;&lt;div class="tf2"&gt;Name 1&lt;br&gt;location&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class ="child"&gt;&lt;a href="http://www.google.com"&gt;&lt;span class="tf"&gt;&lt;/span&gt;&lt;div class="tf2"&gt;Name 1&lt;br&gt;location&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class ="child"&gt;&lt;a href="http://www.google.com"&gt;&lt;span class="tf"&gt;&lt;/span&gt;&lt;div class="tf2"&gt;Name 1&lt;br&gt;location&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
  
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>