css: FlexBox 里面的 FlexBox

Question

我对 FlexBoxes 有疑问 - 我想要

• 我想将页面的一个部分分成两部分(相同高度)，例如每个 100 像素
• 这些部分之一(第 2 个)我想分成三个小部分(等高)100/3 = 33px

下面的代码导致:

• 第一部分的高度:80px
• 第二部分的高度:120px

重要提示:我知道，这可以在没有 FlexBoxes 的情况下实现 - 实际页面/目的有点不同。

但我真的很想知道我做错了什么!

代码:

body {
  height: 200px;
  width: 100% padding: 0;
  margin: 0;
}
.vbox {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-align: stretch;
  display: -moz-box;
  -moz-box-orient: vertical;
  -moz-box-align: stretch;
  display: box;
  box-orient: vertical;
  box-align: stretch;
  min-width: 100%;
  min-height: 100%
}
.vbox > * {
  position: relative;
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-align: stretch;
  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-align: stretch;
  display: box;
  box-orient: horizontal;
  box-align: stretch;
}
.boxFlex {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
}

<div class="vbox">
  <div id="a" class="boxFlex" style='background-color:#0f0'>Box A</div>
  <div id="b" class="boxFlex">
    <div class="vbox">
      <div id="b1" class="boxFlex" style='background-color:#600'>Box B1</div>
      <div id="b2" class="boxFlex" style='background-color:#900'>Box B2</div>
      <div id="b3" class="boxFlex" style='background-color:#C00'>Box B3</div>
    </div>
  </div>
</div>

Answer 1

试试这个:

.vbox {
  display: flex;          /* Flex container */
  flex-direction: column; /* Display children in a column */
  min-height: 100%;
}
.boxFlex {
  height: 0;              /* Set initial height to 0 */
  flex-grow: 1;           /* Distribute remaining space */
}

body {
  height: 200px;
  width: 100%;
  padding: 0;
  margin: 0;
}
.vbox {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.boxFlex {
  height: 0;
  flex-grow: 1;
}

<div class="vbox">
  <div id="a" class="boxFlex" style='background-color:#0f0'>Box A</div>
  <div id="b" class="boxFlex">
    <div class="vbox">
      <div id="b1" class="boxFlex" style='background-color:#600'>Box B1</div>
      <div id="b2" class="boxFlex" style='background-color:#900'>Box B2</div>
      <div id="b3" class="boxFlex" style='background-color:#C00'>Box B3</div>
    </div>
  </div>
</div>