html - 同级 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( flex 方向:行)
  • .item( flex 方向:列)
    • .item-row.item-heading
      • h2
    • .item-row.item-body
      • p
    • .item-row.item-cta
      • a[href]
  • .item( flex 方向:列)
    • .item-row.item-heading
      • h2
    • .item-row.item-body
      • p
    • .item-row.item-cta
      • a[href]

如果当一个元素的 h2 的内容填充两行，而另一个只填充一行时，我希望能够匹配它们的两个父元素 (.item-row.item-heading) 的高度。这同样适用于 .item-row 的其他实例，当他们/他们的 child 有不同的高度时。我想避免必须根据当前内容手动设置高度，因为我必须在内容更改时更改它。

我是 flexbox 的新手，所以我不确定我是否了解所有属性以及它们的工作原理。可能没有内置的方法来执行此操作。我确信有一种方法可以将一些脚本混入其中以使其执行我想要的操作，但我会尽可能避免这种情况。

Answer 1

您可以使用 jQuery matchHeight:

您的代码:

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

这里有完整的文档:

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