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

问题描述

我的flexbox的2个孩子都有 box-flex：1 的风格。我的理解是，他们的宽度应该彼此（两者占用他们的父弹性框的总宽度的 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 =mainrole =mainclass =box1> 
< div class =innerBG> 
一堆东西（div，文本等）去这里
< / div> 
< / div> 
< div id =sidebarclass =box1> 
< div class =innerBG> 
一堆更多的东西（divs，文本等）去这里
< / div> 
< / div> 
< / div> 
  

解决方案

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

： 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/

这将在更多的浏览器中工作。 / p>

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/

This will even work in more browsers.

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