Conception de pages pour un navigateur

La disposition en flexbox

La disposition en flexbox permet d'organiser le contenu de pages complexes en le rendant adaptable aux différentes tailles d'écran.

Remarque : les informations ci-dessous ne présentent que les fonctions principales de la disposition en flexbox.

Principe général

La disposition en flexbox est basée sur une balise à laquelle on donne le statu de "conteneur (flex container)". Toutes les balise que le conteneur englobe ont alors le statu d'"éléments (flex items)".

Un grand nombre de style (tant pour le conteneur que pour les éléments) permettent de paramétrer la façon dans les éléments vont s'afficher dans le conteneur.

Styles pour le conteneur

Le style display

Pour avoir le statu de conteneur, il faut que le style display de la balise englobante ait la valeur flex.

Le style flex-direction

Ce style permet de gérer la direction et le sens d'affichage des éléments. Il définit ainsi l'axe principal d'affichage.

Le style flex-wrap

Ce style permet de gérer le retour à la ligne éventuel des éléments.

flex-wrap: nowrap | wrap | wrap-reverse;

Le style justify-content

Ce style permet de gérer les espaces entre les éléments suivant l'axe principal.

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;

Le style align-items

Ce style permet de gérer l'alignement des éléments suivant la direction perpendiculaire à l'axe principal.

align-items: flex-start | flex-end | center | baseline | stretch;

Le style align-content

Ce style permet de gérer les espaces suivant la direction perpendiculaire à l'axe principal.

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

Styles pour les éléments

Le style flex-grow

Le style flex-shrink

Le style flex-basis