CSS Flexbox问题:为什么我的flexchildren的宽度受到其内容的影响？
CSS Flexbox问题:为什么我的flexchildren的宽度受到其内容的影响？
提问于 2011-11-03 01:53:49
我的flexbox的两个孩子都被赋予了一种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>回答 1
Stack Overflow用户
回答已采纳
发布于 2011-11-03 03:07:05
解决此问题的方法是向.box1元素中添加width: 0。
请参阅： http://jsfiddle.net/thirtydot/fPfvN/
我想我自己在这里找到了答案：http://oli.jp/2011/css3-flexbox/
包含文本内容的框元素子项的首选宽度是当前没有换行的文本，导致非常不直观的宽度和伸缩计算→声明一个宽度在一个框元素子项上超过几个单词(想知道为什么flexbox演示都是“1，2，3”吗？)
请注意，对于您的情况，使用display: table + table-layout: fixed：http://jsfiddle.net/thirtydot/fPfvN/1/看起来要容易得多。不过，flexbox确实允许你以一种display: table无法比拟的方式快速改变周围的事物。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7985021
复制相关文章
相似问题