Flexbox: Align three columns and position header at flex-end

Question

How do I make it so that "Other han" is on the same line as "you how all" so that the tops of the blurbs align and the bottom of the headlines align? Need to keep the integrity of the columns so that if they need to wrap, they can wrap as a whole.

.content {
  display: flex;
  text-align: center;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.rowitem {
  display: flex;
  width: 20em;
  margin: 0 1em;
  text-align: center;
  flex-direction: column;
}

<div class="content">
  <div class="rowitem">
    <h2 class="header">But I must explain to you how all</h2>
    <p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of
      human happiness.</p>
  </div>
  <div class="rowitem">
    <h2 class="header">Other han</h2>
    <p>On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and
      equal blame belongs to those</p>
  </div>
  <div class="rowitem">
    <h2 class="header">Perspiciatis unde</h2>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
      voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
  </div>
</div>

The snippet is different from the picture. Do you want it to look like the picture? — Omri Attiya, Feb 28 '20 at 05:53
No. I don't. I want the top of the blurbs to align. And the bottom of the headlines to align. — maletor, Feb 28 '20 at 05:55
Like if you added a br before the headline and a br before the headline and of the blurb. — maletor, Feb 28 '20 at 05:57

score 0 · Answer 1 · answered Feb 28 '20 at 06:14

Without drastically changing your markup I think you either have to use javascript or set a fixed height on the <h2> elements. If you know that none of them will ever exceed 2 rows of text you can try something like this:

.content {
  display: flex;
  text-align: center;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.rowitem {
  display: flex;
  width: 20em;
  margin: 0 1em;
  text-align: center;
  flex-direction: column;
}

.rowitem h2 {
  height: 56px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

<div class="content">
  <div class="rowitem">
    <h2 class="header">But I must explain to you how all</h2>
    <p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of
      human happiness.</p>
  </div>
  <div class="rowitem">
    <h2 class="header">Other han</h2>
    <p>On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and
      equal blame belongs to those</p>
  </div>
  <div class="rowitem">
    <h2 class="header">Perspiciatis unde</h2>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
      voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
  </div>
</div>

The other option is set the heights with javascript. This has the advantage of being able to adapt to different content but the drawback is.. well.. you're using javascript and not pure css:

$(document).ready(function() {
  equalHeights($('.rowitem h2'));
});

$(window).resize(function() {
  equalHeights($('.rowitem h2'));
});

function equalHeights(selector) {
  var max_height = 0;
  selector.each(function() {
    if ($(this).height() > max_height) max_height = $(this).height();
  });
  selector.height(max_height);
}

.content {
  display: flex;
  text-align: center;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.rowitem {
  display: flex;
  width: 20em;
  margin: 0 1em;
  text-align: center;
  flex-direction: column;
}

.rowitem h2 {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="content">
  <div class="rowitem">
    <h2 class="header">But I must explain to you how all</h2>
    <p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of
      human happiness.</p>
  </div>
  <div class="rowitem">
    <h2 class="header">Other han</h2>
    <p>On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and
      equal blame belongs to those</p>
  </div>
  <div class="rowitem">
    <h2 class="header">Perspiciatis unde</h2>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
      voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
  </div>
</div>

Flexbox: Align three columns and position header at flex-end

1 Answers1