Flexbox高度百分比

Question

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

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这对Flexbox来说是否可行？如果是这样，有没有人可以指出我的方向？

Answer 1

使用flex属性而不是百分比。

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;