Flexbox 高度百分比 [重复]
Posted
技术标签:
【中文标题】Flexbox 高度百分比 [重复]【英文标题】：Flexbox height percentages [duplicate] 【发布时间】：2017-12-28 10:59:17 【问题描述】：我有一个基本的 flexbox 布局，我正在尝试对其应用高度百分比，目前它们都占据相同的百分比......
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 实现吗？如果是这样，有没有人可以为我指明方向的例子？
【问题讨论】：
问题是使用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>【讨论】：
@fightstarr20 没问题！对于 flexbox，我尽量避免使用高度百分比和一般高度。它经常在 Safari 和 IE 中中断，如果有一种使用 flex: 属性定义大小的方法，它总是比 % 更好；） 如何阻止文字影响高度？ @fightstarr20 尝试添加此类：.elementNotAffectingText flex-basis: 0;溢出：自动以上是关于Flexbox 高度百分比 [重复]的主要内容，如果未能解决你的问题，请参考以下文章