Question

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

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

由于外部弹性箱，卡的高度已经一致。我不知道如何制作标题＆＃39;身高一致。

基本布局是：

<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属性，其值为：

table
table-row
table-cell

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

CODEPEN

Answer 2

在.flex-header

中添加min-height

示例：

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

Answer 3

我正在寻找与你提到的相同的布局，在阅读了这里的答案之后，只用CSS就不可能，我尝试了JS解决方案并找到了这个很棒的库here。

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

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

此致

嵌套项目具有相同高度的嵌套Flexbox

3 个答案: