CSS3FlexBox
Standard CSS3 de disposition des éléments dans une page web.
Les Flex Box CSS sont un standard CSS3 de disposition des éléments dans une page web.
<style>
div#conteneur{
display: flex;
flex-direction: row; /* sinon column ou row-reverse ou encore column-reverse */
flex-wrap: nowrap; /* pas de retour à la ligne - sinon: wrap */
justify-content: space-around; /* espacement entre les éléments: flex-start ou flex-end ou space-between */
}
div.element { width:350px; } /* Largeur des trois éléments */
</style>
<div id="conteneur">
<div class="element">Elément 1</div>
<div class="element">Elément 2</div>
<div class="element">Elément 3</div>
</div>
div#conteneur{
display: flex;
flex-direction: row; /* sinon column ou row-reverse ou encore column-reverse */
flex-wrap: nowrap; /* pas de retour à la ligne - sinon: wrap */
justify-content: space-around; /* espacement entre les éléments: flex-start ou flex-end ou space-between */
}
div.element { width:350px; } /* Largeur des trois éléments */
</style>
<div id="conteneur">
<div class="element">Elément 1</div>
<div class="element">Elément 2</div>
<div class="element">Elément 3</div>
</div>
Distribution et axe principal
La distribution, c'est à dire le sens d'affichage horizontal ou vertical des éléments "flex-items" est définie par la propriété flex-direction dont les valeurs peuvent être :- row (distribution horizontale, valeur par défaut)
- row-reverse (distribution horizontale inversée)
- column (distribution verticale)
- column-reverse (distribution verticale inversée)
