vEvGxe

index.html

<div class="flexbox">
  <!-- card list -->
  <ul class="flex-card-list">
    <!-- card list item -->
    <li class="flex-card-listitem">
      <!-- card module -->
      <div class="flex-card">
        <!-- image container -->
        <div class="flex-card-image">
          <img src="http://placehold.it/300x200&text=%20" />
        </div>
        <!-- content container -->
        <div class="flex-card-content">
          <h3 class="flex-card-heading">First</h3>
          <p>I'm a card and I'm first.</p>
          <a href="#" class="flex-card-button">Button</a>
        </div>
      </div>
    </li>
    <!-- card list item -->
    <li class="flex-card-listitem">
      <!-- card module -->
      <div class="flex-card">
        <!-- image container -->
        <div class="flex-card-image">
          <img src="http://placehold.it/300x200&text=%20" />
        </div>
        <!-- content container -->
        <div class="flex-card-content">
          <h3 class="flex-card-heading">Second</h3>
          <p>I'm a card and I'm second.</p>
          <a href="#" class="flex-card-button">Button</a>
        </div>
      </div>
    </li>
    <!-- card list item -->
    <li class="flex-card-listitem">
      <!-- card module -->
      <div class="flex-card">
        <!-- image container -->
        <div class="flex-card-image">
          <img src="http://placehold.it/300x200&text=%20" />
        </div>
        <!-- content container -->
        <div class="flex-card-content">
          <h3 class="flex-card-heading">Third</h3>
          <p>I'm a card and I'm third with lots of text spanning multiple lines.</p>
          <a href="#" class="flex-card-button">Button</a>
        </div>
      </div>
    </li>
    <!-- card list item -->
    <li class="flex-card-listitem">
      <!-- card module -->
      <div class="flex-card">
        <!-- image container -->
        <div class="flex-card-image">
          <img src="http://placehold.it/300x200&text=%20" />
        </div>
        <!-- content container -->
        <div class="flex-card-content">
          <h3 class="flex-card-heading">Fourth</h3>
          <p>I'm a card and I'm fourth.</p>
          <a href="#" class="flex-card-button">Button</a>
        </div>
      </div>
    </li>
  </ul>
</div>

style.css

body {
  background-color: #eee;
  margin:0;
}

ul
{
  list-style-type: none;
  padding: 0;
}

/* Put behind .flexbox for Feature detection with Modernizr */
.flexbox .flex-card-list {
  display:flex;
  flex-wrap:wrap;
  justify-content: center;
}

.flexbox .flex-card-listitem {
  display:flex;
  background-color: #fff;
  padding: 1em;
}

.flexbox .flex-card {
  display:flex;
  flex-direction:column;
}

/* common to flex and non-flex */
.flex-card-list li {
  width:300px;
  margin: 1em;
}

.flexbox .flex-card-content {
  display:flex;
  flex:1 0 auto; /* We have to add a basis for IE10/11 */
  flex-direction:column;
}

.flexbox .flex-card-content p {
  flex:1 0 auto; /* We have to add a basis for IE10/11 */
}

.flex-card-button {
  background-color: #00aeef;
  padding: 1em;
  text-align:center;
  text-decoration: none;
  color: white;
}

vEvGxe.markdown

vEvGxe

A Pen by David Cox on CodePen.

License.