Les éléments flex en CSS
En plus des types de modèles de blocs que nous avons étudiés,
il en existe un autre - les éléments flex. Pour
obtenir de tels éléments, il faut que le parent
de ces éléments ait la propriété display
avec la valeur flex. Le parent lui-même restera
un élément de bloc, mais ses descendants deviendront
des éléments flex.
Les éléments flex, comme les éléments de bloc, peuvent avoir
une largeur et une hauteur, margin et padding.
Cependant, contrairement aux éléments de bloc, par défaut,
les éléments flex s'alignent en rangée à l'intérieur
de leur parent.
Essayons :
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
display: flex; /* les descendants seront des éléments flex */
width: 300px;
height: 200px;
border: 1px solid red;
}
.child {
width: 50px;
height: 50px;
border: 1px solid green;
}
:
