<h1>Example Flexbox Gallery</h1>

<div class="boxes">
  <div class="box box1">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32795/love-the-architecture-01-1024x768.jpg" alt="Amsterdam architecture" />
    <h3>The architecture rocks</h3><p>&nbsp;</p>
  </div>
  <div class="box box2">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32795/sunset-1024x768.jpg" alt="Sunset in Amsterdam" />
    
    <h3>Amsterdam Sunset</h3>
    <p> ... </p>
  </div>
<div class="box box3">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32795/pdx-signpost.jpg" alt="Sign in Pioneer Square; Portland, Oregon" />
<h3>Portland Signpost</h3>
<p> ... </p>
</div>
<div class="box box4">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32795/love-the-architecture-01-1024x768.jpg" alt="amsterdam architecture" />
<h3>The architecture rocks</h3>
<p> ... </p>
</div>
<div class="box box5">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32795/sunset-1024x768.jpg" alt="beautiful sunset" />
<h3>Amsterdam Sunset</h3>
<p> ... </p>
</div>
<div class="box box6">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32795/pdx-signpost.jpg" alt="Portland Signpost" />
<h3>Portland Signpost</h3>
<p> ... </p>
</div>
</div>
.boxes {
  padding: .5vw;
  flex-flow: row wrap;
  display: flex;
}

.box {
  margin: .5vw;
  border: 1px solid #444;
  padding: .5vw;
  flex: 1 0 auto;
  width: 300px;
  
}
.box img {
  width: 100%;
  height: auto;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.