同级 Flexbox 项目/列中的相同行高

Question

我有多个带有标题、描述和号召性用语的产品。每个字数没有规定。我正在使用 flexbox 来显示这些产品，这样每个项目的容器将具有相同的高度，并且可以轻松地清除到下一行，而不必弄乱 nth-child。

我的问题是这样的。是否有 flex 属性（或其他 CSS 属性）可以让我匹配不同列中的行高？

代码笔 http://codepen.io/fedaykin00/pen/yexOLV

Desired outcome

HTML

<div class="container">
  <div class="item">
    <div class="item-row item-heading">
      <h1>Item 1: Far far away</h1>
    </div>
    <div class="item-row item-body">
      <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows
        by their place and supplies it with the necessary</p>
    </div>
    <div class="item-row item-cta">
      <a href="#" class="cta">Far far away</a>
    </div>
  </div>
  <div class="item">
    <div class="item-row item-heading">
      <h1>Item 2: A wonderful serenity has taken possession of my entire soul</h1>
    </div>
    <div class="item-row item-body">
      <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
    </div>
    <div class="item-row item-cta">
      <a href="#" class="cta">A wonderful serenity</a>
    </div>
  </div>
  <div class="item">
    <div class="item-row item-heading">
      <h1>Item 3: One morning, when Gregor Samsa</h1>
    </div>
    <div class="item-row item-body">
      <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of</p>
    </div>
    <div class="item-row item-cta">
      <a href="#" class="cta">One morning</a>
    </div>
  </div>
  <div class="item">
    <div class="item-row item-heading">
      <h1>Item 4: The quick, brown fox</h1>
    </div>
    <div class="item-row item-body">
      <p>The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds</p>
    </div>
    <div class="item-row item-cta">
      <a href="#" class="cta">The quick</a>
    </div>
  </div>
  <div class="item">
    <div class="item-row item-heading">
      <h1>Item 5: Li Europan lingues es membres del sam familie</h1>
    </div>
    <div class="item-row item-body">
      <p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa</p>
    </div>
    <div class="item-row item-cta">
      <a href="#" class="cta">Li Europan</a>
    </div>
  </div>
</div>

CSS

.container {
  display: flex;
  flex-flow: row wrap;
  background-color: darkred;
  padding: 0.5em;
  justify-content: center;
}

.item {
  box-sizing: border-box;
  display: flex;
  flex-flow: column;
  width: calc((100% - 3em) / 3);
  margin: 0.5em;
  padding: 1em 1em 0 1em;
  background-color: lightgray;
}

.item-row {
  margin: 0 0 1em 0;
  padding: 1em;
  background-color: white;
}
.item-row.item-cta {
  margin-top: auto;
  padding: 0;
}
.item-row.item-cta a {
  display: block;
  background-color: blue;
  padding: 1em;
  color: white;
  text-align: center;
}

h1,
p {
  margin: 0;
}

作为大纲

• .container（弹性方向：行）
  • .item（弹性方向：列）
    • .item-row.item-heading
      • h2
    • .item-row.item-body
      • p
    • .item-row.item-cta
      • a[href]
  • .item（弹性方向：列）
    • .item-row.item-heading
      • h2
    • .item-row.item-body
      • p
    • .item-row.item-cta
      • a[href]

如果一个项目的 h2 的内容填满两行，而另一个只填满一行，我希望能够匹配它们两个父元素的高度（.item-row.item-heading）。 .item-row 的其他实例也是如此，当他们/他们的孩子有不同的身高时。我想避免必须根据当前内容手动设置高度，因为当内容更改时我必须更改它。

我是 flexbox 的新手，所以我不确定我是否了解所有属性以及它们是如何工作的。可能没有内置的方法可以做到这一点。我确信有一种方法可以混合一些脚本来让它做我想做的事情，但如果可能的话，我会尽量避免这种情况。

Answer 1

使用 Javascript 实现此目的的最小方法是 here。

function setAllToMaxHeight($el) {
  
    var maxHeight = 0;

    $el.each(function() {
        var height = parseInt($(this).css('height').replace('px',''), 10);
        maxHeight = height > maxHeight ? height : maxHeight;
    });

    $el.css({ 'height' : maxHeight });  
}

setAllToMaxHeight($('.item-heading'));

Answer 2

你可以使用jQuerymatchHeight:

您的代码：

https://jsfiddle.net/debraj/38jtno6a/10/

这里有完整的文档：

http://brm.io/jquery-match-height/