嵌套项目具有相同高度的嵌套弹性框答案

【问题标题】：Nested flexbox with same height for nested items嵌套项目具有相同高度的嵌套弹性框
【发布时间】：2016-12-30 22:21:22
【问题描述】：

我正在尝试实现一个卡片模式（类似于material design），利用 flexbox 进行布局。每张卡片都有一个标题和一个内容，并使用 flexbox 来排列它们。

卡片的宽度是固定的，所以如果标题很长，它会换行，从而使标题更长。问题是我希望一行中的每张卡片看起来一致，所以我希望一行中的每个标题都具有相同的高度。

得益于外部的 flexbox，卡片的高度已经保持一致。我不知道如何使标题的高度一致。

基本布局是：

<div class="flex-container">
    <div class="flex-item">
        <div class="flex-header">
            My header
        </div>
        <div class="flex-content">
            My content
        </div>
    </div>

    <div class="flex-item">
        <div class="flex-header">
            My header
        </div>
        <div class="flex-content">
            My content
        </div>
    </div>    
</div>

弹性盒 CSS：

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

.flex-item {
  width: 200px;
  margin: 10px;

  display: flex;
  flex-flow: column;
}

.flex-header {
  background-color: navy;
  font-size: 2em;
}

.flex-content {
}

我还有一个例子codepen。

【问题讨论】：

可能重复：Equal height columns for flex items of different flex containers
相关：Is it possible to have equal height columns in a multi-line flex container?

标签： css flexbox

【解决方案1】：

您想要的行为是唯一的，只能在一个 HTML 界面中找到，即表格。为了避免大家对使用表格进行布局的所有抱怨和演讲，请尝试使用具有以下值的 display 属性：

table
table-row
table-cell

要使用这些值，请阅读this。

CODEPEN

【讨论】：

【解决方案2】：

在 .flex-header 中添加最小高度

例子：

.flex-header {
  background-color: navy;
  font-size: 2em;
  min-height: 80px;
}

【讨论】：

不能解决问题，如果一个长标题推的高度大于min-height: 80px，那么一个标题会比其他标题大。

【解决方案3】：

我正在寻找与您提到的相同的布局，在阅读了此处的答案后，仅使用 CSS 是不可能的，我尝试了 JS 解决方案并找到了这个很棒的库 here。

我创建了一个代码笔example。它可能会帮助正在寻找相同的人。您需要做的就是添加库并使用以下 jQuery 代码。

$('.item-image').matchHeight({
  byRow: true,
  property: 'height',
  target: null,
  remove: false
});

问候

【讨论】：