Question

我有FlexBoxes的问题 - 我想要

我想将页面分成两部分（相同的高度），例如每个100px
其中一个部分（第二部分）我想分成三个小节（等高）100/3 = 33px

以下代码导致：

第一部分的高度：80px
第二部分的高度：120px

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

但我真的很想明白我做错了什么！

代码：

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>

css：FlexBox内的FlexBox

1 个答案: