59

我的 flexbox 的 2 个孩子都被赋予了box-flex: 1. 我的理解是，它们的宽度应该彼此相等（两者都占其父 flexbox 总宽度的50% ）。但是当内容被添加到孩子时，它们的宽度会发生变化（取决于内容是什么和填充）！为什么会这样？

CSS：

.hasFlex {
   display: box;
   display: -webkit-box;
   display: -moz-box;
   -webkit-box-align: start;
   -moz-box-align: start;
   box-align: start;}
.box0 {
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   box-flex: 0;}
.box1 {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;}
.box2 {
   -webkit-box-flex: 2;
   -moz-box-flex: 2;
   box-flex: 2;}
.box3 {
   -webkit-box-flex: 3;
   -moz-box-flex: 3;
   box-flex: 3;}
.container {
margin-bottom: 10px;
}

HTML：

<div class="container hasFlex">
<div id="main" role="main" class="box1">
    <div class="innerBG">
      a bunch of stuff (divs, text, etc) go here
    </div>
</div>
<div id="sidebar" class="box1">
    <div class="innerBG">
       a bunch more stuff (divs, text, etc.) go here
    </div>
</div>
</div>
4

1 回答 1

92

解决方法是添加width: 0到.box1元素中。

见：http: //jsfiddle.net/thirtydot/fPfvN/

我想我在这里发现了这一点：http: //oli.jp/2011/css3-flexbox/

包含文本内容的框元素子元素的首选宽度目前是没有换行符的文本，导致宽度和 flex 计算非常不直观 → 在包含多个单词的框元素子元素上声明宽度（想知道为什么 flexbox 演示都是“1,2,3”？）

display: table请注意，对于您的情况，使用+看起来要容易得多：http table-layout: fixed: //jsfiddle.net/thirtydot/fPfvN/1/。display: table不过，flexbox 确实允许您以无法与之竞争的方式快速改变事物。

于 2011-11-02T19:07:05.433 回答