title: Creating a Responsive Flex Layout of Items Using Phone Width and Maintaining Aspect Ratio
body: <p>Would love some help from the CSS flex masters out there.</p>
  <ol>
  <li>I have a n-count list of 4:3 aspect ratio items which should layout and take the full width of the page.</li>
  <li>When the page resizes horizontally the grid of items should wrap.</li>
  <li>On a phone, the items should all be one column with their width equal to the phone with minus a little bit of padding.</li>
  </ol>
  <p>I've got this which is pretty close: <a href="https://codepen.io/kirkouimet/pen/gOLrmvL" rel="nofollow noreferrer">https://codepen.io/kirkouimet/pen/gOLrmvL</a></p>
  <pre><code>ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
  }
  
  li {
      margin: 32px;
      width: 400px;
      height: 300px;
      
      list-style-type: none;
      border-radius: 12px;
      background: #CCC;
  }
  </code></pre>
  <p>The problem I am having is with #3. Some phones have smaller widths than others, so I can't set a fixed width pixel size. Setting a fixed width pixel size is also a problem because I then need to maintain a 4:3 aspect ratio. The items need to have a max width as well so they look good on desktop...</p>
  <p>Anyone have ideas on how I could approach this? I think flex and flex wrapping is the way to go. I would like to avoid JavaScript if at all possible as well.</p>