文章/答案/技术大牛

发布

社区首页 >问答首页 >css: FlexBox css

问css: FlexBox css
EN

Stack Overflow用户

提问于 2015-01-12 22:34:44

回答 1查看 5.8K关注 0票数 0

我和FlexBoxes有个问题-我想

我想把这一页分成两部分(相同的高度)，例如每页100 to。
其中一节(第二节)我想把它分成三个小节(等高)，100/3 =33 to。

以下代码的结果如下：

第一节高度:80 of
第二节高度:120 of

重要的是:我知道，没有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>

css

flexbox

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-01-12 23:50:08

试试这个：

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/27911917

复制

相似问题

问css: FlexBox css
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问css: FlexBox cssEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问css: FlexBox css
EN