如何使用 Materialize 和 Flexbox 创建等高的列？答案

【问题标题】：How to create equal-height columns using Materialize and Flexbox?如何使用 Materialize 和 Flexbox 创建等高的列？
【发布时间】：2019-06-09 11:16:27
【问题描述】：

我正在尝试使用 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 一起工作

【问题讨论】：

您是否在容器上尝试过flex-direction: column？
是的，但是没有用。我的面板看起来更小了。

标签： html css flexbox panel materialize

【解决方案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>

【讨论】：

非常感谢您提供此解决方案。现在只剩下一个问题：当我添加更多内容时，我的面板不再扩展。