Easy-Micro


LANGAGE Standard CSS3 de disposition
FlexBox

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>
#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:20%; } /* 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)

    Pour aller plus loin...


    Suivez les aventures des skippers aquitains sur EasyVoile.com
    Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]
    Dimanche 21 juillet 2019 - Semaine 29 - Saint Victor (Demain: Sainte Marie-Madeleine)
    Aujourd'hui, c'est l'anniversaire de Hubert-Felix Thiefaine (1948-71 ans), chanteur français et de Charlotte Gainsbourg (1971), actrice française. Autre 21 juillet: 1798 - Victoire de la "bataille des pyramides" par Bonaparte.
    Haut de page Easy-Micro