Démo flexbox : flex-grow

by Arnaud

HTML

flew grow avec les enfant qui ont la propriété flew-grow:1
<div class="conteneur">
<div class="elementConteneur elementConteneur1">
un
</div>
<div class="elementConteneur elementConteneur2">
deux
</div>
<div class="elementConteneur elementConteneur3">
trois
</div>


</div>

<br>
flew grow avec le second élément qui a la propriété flex-grow:2 et les autres flex-grow:1
<div class="conteneur conteneur2">

<div class="elementConteneur elementConteneur1">
un
</div>
<div class="elementConteneur elementConteneur2">
deux
</div>
<div class="elementConteneur elementConteneur3">
trois
</div>


</div>

CSS

.conteneur{
  display:flex;
  background:#eee;
padding:10px;
border: 5px dotted #666;
width:500px;
}


.elementConteneur{
  border:1px solid #ccc;
  padding:10px;
  width:100px;
  flex-grow:1;
  flex-shrin
}

.conteneur2 .elementConteneur{
  flex-grow:1;
}

.conteneur2 .elementConteneur2{
  flex-grow:2;
}