CSS Flexbox 问题:为什么我的 flexchildren 的宽度受其内容的影响? [英] CSS Flexbox issue: Why is the width of my flexchildren affected by their contents?

问题描述

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

CSS:

.hasFlex {显示:盒子；显示:-webkit-box；显示:-moz-box；-webkit-box-align:开始；-moz-box-align:开始；框对齐:开始；}.box0 {-webkit-box-flex: 0;-moz-box-flex: 0;盒弹性:0;}.box1 {-webkit-box-flex: 1;-moz-box-flex: 1;盒弹性:1;}.box2 {-webkit-box-flex: 2;-moz-box-flex: 2;盒弹性:2;}.box3 {-webkit-box-flex: 3;-moz-box-flex: 3;盒弹性:3;}.容器 {底边距:10px；}

HTML:

<div id="main" role="main" class="box1"><div class="innerBG">一堆东​​西(div、文本等)到这里

<div id="sidebar" class="box1"><div class="innerBG">一堆更多的东西(div、文本等)到这里

解决方案

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

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

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

<块引用>

包含文本内容的框元素子元素的首选宽度是目前文本没有换行，导致非常不直观宽度和 flex 计算 → 在框元素子元素上声明宽度用不止几句话(有没有想过为什么 flexbox 演示都是1,2,3"?)

请注意，对于您的情况，使用 display: table + table-layout: fixed: http://jsfiddle.net/thirtydot/fPfvN/1/.尽管如此，flexbox 确实允许您以一种 display: table 无法与之竞争的方式快速更改内容.

The 2 children of my flexbox are each given a style of box-flex: 1. My understanding is that their widths should then be equal to each other (both occupying 50% of the total width of their parent flexbox). But when content is added to the children, their width changes (depending on what the content is and padding)! Why does this happen?

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>

解决方案

The workaround for this is to add width: 0 to the .box1 elements.

See: http://jsfiddle.net/thirtydot/fPfvN/

I think I found that out for myself here: http://oli.jp/2011/css3-flexbox/

The preferred width of a box element child containing text content is currently the text without line breaks, leading to very unintuitive width and flex calculations → declare a width on a box element child with more than a few words (ever wonder why flexbox demos are all "1,2,3"?)

Note that for your situation, it looks far easier to use display: table + table-layout: fixed: http://jsfiddle.net/thirtydot/fPfvN/1/. Though, flexbox does allow you to quickly change things around in a way that display: table can't compete with.

这篇关于CSS Flexbox 问题:为什么我的 flexchildren 的宽度受其内容的影响?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！