Flexbox高度百分比

Question

我有一个基本的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甚至有可能吗？如果是这样，有人能给我指出一个方向的例子吗？

Answer 1

使用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>