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>