title: Inline, responsive elements with flex
body: <p>I have five divs that need to be inlined and responsive so that when a window is resized, they break into a new row. Accordingly. And I need them to be evenly, horizontally spread. </p>
  
  <p>I can't edit HTML, only CSS. And I've tried multiple things. From basic display: inline-block, to display: flex. But the best thing I could accomplish was to inline them and then have them mushed together when the browser is resized. I'm not the best with flexbox and I've tried going through SO for answers, but nothing I apply works. </p>
  
  <p>Here is my code outline. Currently, it spreads the items evenly, but as you can see when the window is resized, they just get smashed together. I want them to go into the second row when the inline no longer works. Something like Bootstrap columns, I guess. Can someone take a look and let me know how I can do this?</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>.container {
    display: flex;
    text-align: center;
    justify-content: space-between;
  }
  
  .item {
    background-color: green;
    border: 1px solid black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="item"&gt;content goes here, just an example&lt;/div&gt;
    &lt;div class="item"&gt;content goes here, just an example&lt;/div&gt;
    &lt;div class="item"&gt;content goes here, just an example&lt;/div&gt;
    &lt;div class="item"&gt;content goes here, just an example&lt;/div&gt;
    &lt;div class="item"&gt;content goes here, just an example&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>