Flexbox高度百分比 [英] Flexbox height percentages

问题描述

我有一个基本的flexbox布局，我正在尝试应用高度百分比，目前它们都占据相同的百分比...

  html，body {height：100％;保证金：0;填充：0; text-align：center;}。row_one {background：blue;身高：30％;}。row_two {background：wheat; height：30％;}。row_three {background：yellow; height：40％;}。fill-height-or-more {min-height：100％;显示：flex; flex-direction：column;}。fill-height-or-more> div {flex：1;显示：flex; flex-direction：列; justify-content：center;}  

< section class = 一些区域填充高度或更多> < div class =row_one>第1行< / div> < div class =row_two>第2行< / div> < div class =row_three>行3< / div>< / section>

这甚至可能与flexbox？如果是这样，是否有人有一个例子，他们可以指向我的方向？

解决方案

使用 flex

$ b

< {身高：100％;保证金：0;填充：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％;显示：flex; flex-direction：column;}。fill-height-or-more> div {display：flex; flex-direction：列; justify-content：center;}

< section class = 一些区域填充高度或更多> < div class =row_one>第1行< / div> < div class =row_two>第2行< / div> < div class =row_three>第3行< / div>< / section>

I have a basic flexbox layout that I am trying to apply height percentages to, currently they all occupy the same percentage…

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>

Is this even possible with flexbox? If so, does anybody have an example they can point me in the direction of?

解决方案

Use flex property instead of percentages.

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>

这篇关于Flexbox高度百分比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！