我有一个基本的弹性盒布局，我正在尝试应用高度百分比，目前它们都占据相同的百分比......
html,
body {
height: 100%;
margin: 0;
padding: 0;
text-align: center;
}
.row_one {
background: blue;
height: 30%;
}
.row_two {
background: wheat;
height: 30%;
}
.row_three {
background: yellow;
height: 40%;
}
.fill-height-or-more {
min-height: 100%;
display: flex;
flex-direction: column;
}
.fill-height-or-more > div {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
<section class="some-area fill-height-or-more">
<div class="row_one">
Row 1
</div>
<div class="row_two">
Row 2
</div>
<div class="row_three">
Row 3
</div>
</section>
这对于 Flexbox 来说是可能的吗？如果是这样，有人有一个例子可以为我指明方向吗？
Use flex属性而不是百分比。
html,
body {
height: 100%;
margin: 0;
padding: 0;
text-align: center;
}
.row_one {
background: blue;
flex: 3
}
.row_two {
background: wheat;
flex: 3;
}
.row_three {
background: yellow;
flex: 4;
}
.fill-height-or-more {
min-height: 100%;
display: flex;
flex-direction: column;
}
.fill-height-or-more > div {
display: flex;
flex-direction: column;
justify-content: center;
}
<section class="some-area fill-height-or-more">
<div class="row_one">
Row 1
</div>
<div class="row_two">
Row 2
</div>
<div class="row_three">
Row 3
</div>
</section>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
