如何使用Materialize和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占用尽可能多的空间。

像这样：

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