如何使用 Materialise 和 Flexbox 创建等高的列？

Question

我正在尝试使用 Flexboxes 来拉伸我使用 Materialize 创建的面板。

这是创建我的面板的 html：

<div class="row">   
    <div class="col s6">
        <div class="card-panel">
            panel1
        </div>
        <div class="card-panel">
            panel2
        </div>
        <div class="card-panel">
            panel3
        </div>
    </div>
    <div class="col s6">
        <div class="card-panel">
            panel4
        </div>
    </div>
</div>

这是结果：

现在我想拉伸 panel4 以使其与 panel3 的底部齐平。

使用 Flexbox 可能是可行的，但我不知道如何让 Materialize 和 Flexbox 协同工作

Answer 1

Materilize 使用浮点数，这在 flexbox 下会被否定，所以我们必须使用 flexbox 和 flex-direction:Column.

分别布置每一列

然后我们告诉每个卡片面板使用 flex:1.

尽可能多地占用 space

像这样：

.row {
  display: flex;
}

.col {
  display: flex;
  flex-direction: column;
}

.card-panel {
  flex: 1;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<div class="row">
  <div class="col s6">
    <div class="card-panel">
      panel1
    </div>
    <div class="card-panel">
      panel2
    </div>
    <div class="card-panel">
      panel3
    </div>
  </div>
  <div class="col s6">
    <div class="card-panel">
      panel4
    </div>
  </div>
</div>

如何使用 Materialise 和 Flexbox 创建等高的列？

How to create equal-height columns using Materialize and Flexbox?

html

css

panel

materialize

flexbox