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 ]
    Samedi 24 août 2019 - Semaine 34 - Saint Barthélémy (Demain: Saint Louis)
    Aujourd'hui, c'est l'anniversaire de Jean Michel Jarre (1948-71 ans), compositeur français de musique électronique (Oxygène). Autre 24 août: 1572 - Massacre des protestants par les catholiques.
    Haut de page Easy-Micro