css - 嵌套元素具有相同高度的嵌套 flexbox

Question

我正在尝试使用 flexbox 进行布局来实现卡片模式(类似于 material design)。每张卡片都有一个标题和一个内容，并使用 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>

Flexbox 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 .

Answer 1

您想要的行为是独一无二的，只能在一个 HTML 界面(即表格)中找到。为了避免每个人对使用表格进行布局的所有提示和说教，请尝试使用具有以下值的 display 属性:

1. 表格
2. 表格行
3. 表格单元格

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

CODEPEN