如何使用Materialize和Flexbox创建等高列? [英] How to create equal-height columns using Materialize and Flexbox?
问题描述
我正在尝试使用Flexboxes来拉伸我使用Materialize创建的面板.
I am trying to use Flexboxes in order to strech a panel I created using Materialize.
这是创建面板的html:
This is the html that creates my panels:
<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
的底部齐平.
Now I would like to strech panel4
in order to make it flush with the bottom of panel3
.
使用Flexbox可能可以做到这一点,但我不知道如何使Materialize和Flexbox协同工作
Probably this is possible using Flexbox but I can't figure out how to get Materialize and Flexbox to work together
推荐答案
Materilize使用的浮点数将在flexbox下取反,因此我们将不得不使用flexbox和flex-direction:Column
分别布置每一列.
Materilize uses floats which will be negated under flexbox, so we will have to lay out each column separately using flexbox and flex-direction:Column
.
然后我们告诉每个卡面板使用flex:1
占用尽可能多的空间.
Then we tell each card-panel to be to take upas much space as it can using 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>
这篇关于如何使用Materialize和Flexbox创建等高列?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!