title: Flexbox image layout
body: <p>I'm trying to create a flex box layout so when the screen resizes smaller the images will fall underneath each other and if the screen size gets bigger more images will apear on the line. I thought maybe giving the <code>flex-container</code> a <code>max-width</code> would work but it didn't. How would I achieve this? Anything helps, thanks.</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>/*Fonts*/
  @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600);
  @import url(https://use.fontawesome.com/releases/v5.0.8/css/all.css);
  
  /*Body*/
  body {
   font-family: "Open Sans", Arial, sans-serif;
   background-color: #fefefe;
   padding-bottom: 3rem;}
  
  /*Profile Picture*/
  .profile-picture {
    display: flex;
    margin-top: 55px;
    margin-bottom: 35px;
    display: inline-block;
    width: 125px;
    height: 125px;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-color: #f1f1f1;}
  .image {
    background-image: url('https://www.dropbox.com/s/8dtg60sbha99x2o/Photo%202018-02-05%2C%209%2026%2043%20AM.jpg?raw=1');}
  
  /*Profile Name*/
  .profile-name {
    text-align:center; 
    margin-top:-20px; 
    margin-bottom:35px; 
    font-weight:bold;}
  
  /*User Name*/
  .user-name {
    text-align:center; 
    margin-top:-30px; 
    margin-bottom:35px; 
    color:rgba(1,1,1,0.35);}
  
  /*Follow Button*/
  .follow-button-position {
    text-align:center;
    margin-bottom:55px;
    margin-top:-10px;}
  .follow-button {
    text-align:center;
    padding-top:7.5px;
    padding-bottom:7.5px; 
    padding-left:25px; 
    padding-right:25px;
    border-radius:2px;
    background-color:rgba(1,1,1,0); 
    border-style:solid; 
    border-color:#af985a; 
    border-width:1px;
    color:#af985a;}
  .follow-button:hover {
    cursor:pointer;}
  
  /*Posts*/
  .flex-container {
    display: flex;
    justify-content: center;}
  
  img {
      max-width:270px;
    height:auto;
  padding:15px;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="flex-container"&gt;
    &lt;div class="profile-picture image"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="profile-name"&gt;
    &lt;p&gt;cole gwoz&lt;/p&gt; 
  &lt;/div&gt;
  
  &lt;div class="user-name"&gt;
    &lt;p&gt;colegwoz&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class="follow-button-position"&gt;
    &lt;button class="follow-button"&gt;Follow&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;div class="flex-container"&gt;
    &lt;div&gt;
  &lt;img src="https://www.dropbox.com/s/4c05cegbonfqo5k/Photo%202018-03-03%2C%202%2020%2022%20PM.jpg?raw=1"&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img src="https://www.dropbox.com/s/6h9hp6pdgdyiqwt/Photo%202018-01-01%2C%204%2038%2010%20PM.jpg?raw=1"&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img src="https://www.dropbox.com/s/qzuhelo4lf7eyu0/Photo%202018-01-01%2C%204%2038%2037%20PM.jpg?raw=1"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>