<ul class="flex-card-list"> <!-- card list -->
  <li class="flex-card-listitem"> <!-- card list item -->
    <div class="flex-card"> <!-- card module -->
      <div class="flex-card-image"> <!-- image container -->
        <img src="http://lorempixel.com/918/482/" />
      </div>
      <div class="flex-card-content"> <!-- content container -->
        <h3 class="flex-card-heading">First</h3>
        <p>Lorem ipsum dolor sit amet, qui in tritani deseruisse. Nemore efficiantur ei eos, modus elitr ei cum. Graecis invidunt vel te, ut eos veri tation sensibus. Perfecto vituperata adversarium vim ut, ut quas putent scribentur qui, quas porro debitis ne sea.</p>
        <a href="#" class="flex-card-button">Button</a>
      </div>
    </div>
  </li>
  <li class="flex-card-listitem">
    <!-- card module -->
    <div class="flex-card">
      <!-- image container -->
      <div class="flex-card-image">
        <img src="http://lorempixel.com/459/320/" />
      </div>
      <!-- content container -->
      <div class="flex-card-content">
        <h3 class="flex-card-heading">Second</h3>
        <p>Odio blandit per eu, mea sonet commodo eu. Et duo iusto sanctus, ei nam assum regione salutatus. Pri minim ridens at, persecuti conceptam sed ut. Ius veniam fuisset ne, augue noluisse invidunt usu at.</br>
        Eu dictas persecuti sed. His fuisset gubergren ad. Ad usu nominati constituam, eum eu sensibus vulputate. Dolorum nominati sed ex. In tempor ceteros tibique mel, eripuit lobortis prodesset eum et. Ius liber paulo eu.</p>
        <a href="#" class="flex-card-button">Button</a>
      </div>
    </div>
  </li>
  <li class="flex-card-listitem">
    <!-- card module -->
    <div class="flex-card">
      <!-- image container -->
      <div class="flex-card-image">
        <img src="http://lorempixel.com/380/241/" />
      </div>
      <!-- content container -->
      <div class="flex-card-content">
        <h3 class="flex-card-heading">Third</h3>
        <p>Qui ut diam molestie. Probatus consulatu ius ad, vim te ferri simul veniam. Est dicam eligendi in. Ex vis solum consectetuer. In dicunt feugiat est.</p>
        <a href="#" class="flex-card-button">Button</a>
      </div>
    </div>
  </li>
  <li class="flex-card-listitem">
    <!-- card module -->
    <div class="flex-card">
      <!-- image container -->
      <div class="flex-card-image">
        <img src="http://lorempixel.com/241/241/" />
      </div>
      <!-- content container -->
      <div class="flex-card-content">
        <h3 class="flex-card-heading">Fourth</h3>
        <p>Atqui accumsan signiferumque ea quo, sapientem persecuti sed in. Choro legere populo qui in. Nihil tractatos cum cu, ea paulo tincidunt eum. Cu sea tantas iuvaret antiopam, eu vim fuisset menandri. No ancillae voluptua temporibus cum, altera pertinax cu pro, at mei iriure dolorum.</p>
        <a href="#" class="flex-card-button">Button</a>
      </div>
    </div>
  </li>
  <li class="flex-card-listitem">
    <!-- card module -->
    <div class="flex-card">
      <!-- image container -->
      <div class="flex-card-image">
        <img src="http://lorempixel.com/459/241/" />
      </div>
      <!-- content container -->
      <div class="flex-card-content">
        <h3 class="flex-card-heading">Fifth</h3>
        <p>Molestie interesset has cu, officiis expetenda splendide quo ei, case paulo periculis cum ea. Facilisi gloriatur vulputate vix eu, ferri albucius mentitum et vim. Has cu sumo recusabo conceptam. Mea vocibus splendide contentiones an, graeco nostrud te mea. Sit meis alterum patrioque eu, ad atqui possit reprimique mea. Ex possim partiendo mei, pri doming rationibus ad.</br>
        Quo affert soluta propriae no, vis eu illum viderer, quem tincidunt contentiones at cum. Vero iisque ornatus no eos, noster timeam ius in. Eam autem adipisci at. Ei nostro dicunt veritus duo, eam ex docendi torquatos. Lorem congue signiferumque id eum, veniam ancillae mei eu, sea ne abhorreant dissentias consequuntur.
        </p>
        <a href="#" class="flex-card-button">Button</a>
      </div>
    </div>
  </li>
</ul>

* {
  box-sizing: border-box;
}

body {
  background-color: #eee;
}

img {
  width: 100%;
}

.flex-card-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}

.flex-card-listitem {
  padding: 10px;
  display: flex;
  flex-flow: column nowrap;
  flex: 1 1 25%;
  min-width: 20rem;
  max-width: 33.3333%;
}

.flex-card {
  padding: 20px;
  background: #fff;
  display: flex;
  flex-flow: column nowrap;
  flex: 1 0 auto;
  border-radius: 5px;
}

.flex-card-image img {
  border-radius: 5px;
}

.flex-card-content {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

.flex-card-content p {
  flex: 1 0 auto;
}

.flex-card-button {
  text-decoration: none;
  color: #fff;
  background: #4DA54E;
  padding: 10px;
  text-align: center;
  display: block;
  margin-top: 20px;
  width: 90%;
  align-self: center;
  border-radius: 5px;
}

.flex-card-button:hover {
  background: #3d833e;
}