59

私のフレックスボックスの 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>
4

1 に答える 1

92

これを回避するには、要素を追加width: 0します。.box1

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

ここで自分でそれを見つけたと思います：http://oli.jp/2011/css3-flexbox/

テキスト コンテンツを含むボックス要素の子の推奨される幅は現在、改行のないテキストであり、非常に直感的でない幅とフレックスの計算につながります → 少数の単語を含むボックス要素の子で幅を宣言します (なぜフレックスボックスのデモがすべて「1,2,3」?)

display: tableあなたの状況では、 + table-layout: fixed: http://jsfiddle.net/thirtydot/fPfvN/1/を使用する方がはるかに簡単に見えることに注意してください。display: tableただし、フレックスボックスを使用すると、競合できない方法で物事をすばやく変更できます。

于 2011-11-02T19:07:05.433 に答える