web-dev-qa-db-fra.com

CSS Flexbox: Pourquoi la largeur de mes enfants flexibles est-elle affectée par leur contenu?

Les 2 enfants de mon flexbox reçoivent chacun un style de box-flex: 1. Ma compréhension est que leurs largeurs devraient alors être égales les unes aux autres (les deux occupant 50% de la largeur totale de leur flexbox parent). Mais lorsque du contenu est ajouté aux enfants, leur largeur change (en fonction du contenu et du rembourrage)! Pourquoi cela arrive-t-il?

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

La solution de contournement consiste à ajouter width: 0 au .box1 éléments.

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

Je pense que je l'ai découvert par moi-même ici: http://oli.jp/2011/css3-flexbox/

La largeur préférée d'un enfant d'élément de boîte contenant du contenu textuel est actuellement le texte sans saut de ligne, ce qui conduit à des calculs de largeur et de flexion très intuitifs → déclarer une largeur sur un enfant d'élément de boîte avec plus de quelques mots (demandez-vous pourquoi flexbox sont toutes "1,2,3"?)

Notez que pour votre situation, il semble beaucoup plus facile à utiliser display: table + table-layout: fixed: http://jsfiddle.net/thirtydot/fPfvN/1/ . Cependant, flexbox vous permet de changer rapidement les choses d'une manière qui display: table ne peut pas rivaliser.

82
thirtydot