web-dev-qa-db-ja.com

CSS Flexbox問題：flexchildrenの幅が内容によって影響を受けるのはなぜですか？

My 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="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>
htmlcsscss3flexbox
52
zakdances

これを回避するには、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/ 。ただし、flexboxを使用すると、display: tableが競合できない方法で状況をすばやく変更できます。

82
thirtydot