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 ]
    Lundi 18 mars 2019 - Semaine 12 - Saint Cyrille de Jérusalem (Demain: Saint Joseph)
    Aujourd'hui, c'est l'anniversaire de Luc Besson (1959-60 ans), réalisateur et producteur français, de Xavier Deluc (1958), acteur français et de Laetitia Hallyday (1975). Autre 18 mars: 1314 : supplice de Jacques de Molay, grand maître des Templiers.
    Haut de page Easy-Micro