Question

我有多个产品，包含标题，说明和号召性用语。每个字数不受监管。我正在使用flexbox来展示这些产品，以便每个项目的容器具有相同的高度，并且可以轻松地清除到下一行，而不必与第n个孩子混在一起。

我的问题是这个。是否有一个flex属性（或其他CSS属性）可以让我匹配单独列中行的高度？

Codepen http://codepen.io/fedaykin00/pen/yexOLV

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-direction：row）
- .item （flex-direction：column）
  - 的 .item-row.item-标题
    - 的 H2
  - 的 .item-row.item体
    - 的 P
  - 的 .item-row.item-CTA
    - 的一个[HREF]
- .item （flex-direction：column）
  - 的 .item-row.item-标题
    - 的 H2
  - 的 .item-row.item体
    - 的 P
  - 的 .item-row.item-CTA
    - 的一个[HREF]

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

我是Flexbox的新手，所以我不确定我是否了解所有属性以及它们的工作原理。可能没有内置的方法来做到这一点。我确定有一种方法可以在混合中添加一些脚本以使其按照我的意愿行事，但如果可能的话，我会尽量避免这种情况。

Answer 1

您可以使用jQuery matchHeight：

您的代码：

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

此处提供完整文档：

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

Answer 2

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

＆＃13;

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'));

＆＃13;

兄弟Flexbox项目/列中的等行高度

2 个答案: