Set image baseline within a flexbox layout

Question

I'm trying to create a multi-column layout using flexbox and align the baselines in all columns. I do this using the align-items: baseline property. Now this works great when the first element in each column is text, such as the following:

CSS

.container {
  display: flex;
  align-items: baseline; 
}

.col-2 {
  width: 48%;
}

HTML

<div class='container'> 
  <div class='col-2'>
    <h2>Nullam eget metus suscipit, auctor diam quis, sagittis eros. Phasellus quis iaculis nisi.</h2>
  </div>
  <div class='col-2'>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lobortis nulla in elit hendrerit congue. Nullam eleifend, neque vitae finibus accumsan, augue dui lacinia leo, eget sagittis ipsum dui id leo.</p>
  </div>
</div>

The problem I run into is when the first element in a column is an image, like so:

<div class='container'> 
  <div class='col-2'>
    <h2>Nullam eget metus suscipit, auctor diam quis, sagittis eros. Phasellus quis iaculis nisi.</h2>
  </div>
  <div class='col-2'>
    <img src='https://c1.staticflickr.com/1/644/23373656961_9d6426d815_h.jpg'>
  </div>
</div>

The heading in the first column aligns with the bottom of the image in the second column. What I would like to do is change the image baseline so that the heading will move towards the top of the column. I'm aware that you can resolve this issue by setting the align-items property to flex-start, but I would prefer to leave the align-items property as is. That way the text baselines will always align no matter how many columns there are.

My goal - figure out how to adjust the image baseline without changing the .container class. Is this possible?

Here's a codepen you can play around with http://codepen.io/jonathink/pen/wMwgwZ

Answer 1

What I would like to do is change the image baseline so that the heading will move towards the top of the column.

My goal - figure out how to adjust the image baseline without changing the .container class. Is this possible?

You can create a class for images and then use the align-self property to adjust the alignment of images only.

From your codepen:

Revised HTML (added .image class in two places)

<div class='container'>
  <div class='col-2'>
    <h2>Nullam eget metus suscipit...</h2>
  </div>
  <div class='col-2'>
    <p>Lorem ipsum dolor sit amet, cons...</p>
  </div>
</div>
<div class='container'>
  <div class='col-2'>
    <h2>Nullam eget metus suscipit...</h2>
  </div>
  <div class='col-2 image'><!-- ADJUSTMENT HERE -->
    <img src='https://c1.staticflickr.com/1/644/23373656961_9d6426d815_h.jpg'>
  </div>
</div>
<div class='container'>
  <div class='col-3'>
    <h2>Nullam eget metus suscipit...</h2>
  </div>
  <div class='col-3'>
    <p>Lorem ipsum dolor sit amet...</p>
  </div>
  <div class='col-3 image'><!-- ADJUSTMENT HERE -->
    <img src='https://c1.staticflickr.com/1/644/23373656961_9d6426d815_h.jpg'>
  </div>
</div>

Revised CSS (added one rule)

.image { align-self: flex-end; }

Revised DEMO