CSS Flexbox 问题：为啥我的 flexchildren 的宽度会受到其内容的影响？

Posted 2023-03-05

【中文标题】CSS Flexbox 问题：为啥我的 flexchildren 的宽度会受到其内容的影响？

【英文标题】：CSS Flexbox issue: Why is the width of my flexchildren affected by their contents?CSS Flexbox 问题：为什么我的 flexchildren 的宽度会受到其内容的影响？

【发布时间】：2011-12-20 13:33:35

【问题描述】：

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

【问题讨论】：

***.com/q/36247140/3597276

【参考方案1】：

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

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

我想我是在这里自己发现的：http://oli.jp/2011/css3-flexbox/

包含文本内容的框元素子元素的首选宽度是 目前文字没有换行，导致很不直观 width 和 flex 计算 → 在 box 元素子元素上声明宽度 不止几句话（想知道为什么 flexbox 演示都是 “1,2,3”？）

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

【讨论】：

任何宽度都可以。为了可降解性，在这种情况下也可以50%。

百分比宽度不会以与绝对宽度相同的方式强制解决方法。 （在 Webkit，chrome v27 中）

我只想说，通过在子级中使用width: 0，在父级中使用justify-content: spaced-between;，以及在父级中使用-webkit-flex-direction: row; 和-webkit-flex-wrap: wrap; 的组合，我变得非常好, 行为良好的框，它们均匀分布，并在长文本中分断到下一行。我通过了很多 SO 答案来获得我的理想行为，width:0 帮助我解决了最后一个问题！

希望我在一小时前看到这个答案

如果你使用 'flex-direction: column'，这似乎中断了。 'flex-basis: 0' 是一个更好的解决方案，尽管它在与 'flex-grow: 0' 结合使用时会中断（如果你不使用 flex-basis 属性，它会起作用）。整个 flexbox 似乎远没有承诺的那么优雅 :(