Démo flexbox : align-items

by Arnaud

HTML

stretch (valeur par défaut)
<div class="conteneur conteneur1">
<div class="elementConteneur elementConteneur1">
un
</div>
<div class="elementConteneur elementConteneur2">
deux
</div>
<div class="elementConteneur elementConteneur3">
trois<br>plus<br>textetrois<br>plus<br>textetrois<br>plus<br>texte
</div>


</div>

<br>
flex-start
<div class="conteneur conteneur2">
<div class="elementConteneur elementConteneur1">
un
</div>
<div class="elementConteneur elementConteneur2">
deux
</div>
<div class="elementConteneur elementConteneur3">
trois<br>plus<br>texte
</div>


</div>
flex-end
<br>
<div class="conteneur conteneur3">
<div class="elementConteneur elementConteneur1">
un
</div>
<div class="elementConteneur elementConteneur2">
deux
</div>
<div class="elementConteneur elementConteneur3">
trois<br>plus<br>texte
</div>


</div>

<br>
center
<div class="conteneur conteneur4">
<div class="elementConteneur elementConteneur1">
un
</div>
<div class="elementConteneur elementConteneur2">
deux
</div>
<div class="elementConteneur elementConteneur3">
trois<br>plus<br>texte
</div>


</div>

<br>

CSS

.conteneur{
  display:flex;
  background:#eee;
padding:10px;
border: 5px dotted #666;
width:300px;
display:table-cell;
}





.elementConteneur {

    border:1px solid #ccc;
  padding:10px;

}


.conteneur1{
  align-items:stretch;
}

.conteneur2{
   align-items:flex-start;
 
}

.conteneur3{
   align-items:flex-end;
 
}

.conteneur4{
    align-items:center;

}