CSS - display: flex
Les flex boxes permet entre autre d'aligner et de positionner les élements au sein d'un conteneur.
Sources
On commence par donner la propriété
display: flex
au conteneur..container {
display: flex;
}
Pour positionner horizontalement les éléments, on utilise la propriété
justify-content
..container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
flex-start
: les éléments s'alignent au côté gauche du conteneur ;flex-end
: les éléments s'alignent au côté droit du conteneur ;center
: les éléments s'alignent au centre du conteneur ;space-between
: les éléments sont séparés d'un même espacement ;space-around
: les éléments sont entourés d'une même marge (deux fois plusd'espacement entre deux éléments qu'entre un élément et le bord du conteneur) ;space-evenly
: les espacements sont tous égaux (même espacement entre deuxéléments et entre un élément et le bord du conteneur).
Pour aligner veticalement les éléments d'une ligne, on utiliser la propriété
align-items
..container {
align-items: flex-start | flex-end | center | baseline | stretch;
}
flex-start
: Les éléments s'alignent en haut ;flex-end
: les éléments s'alignent en bas ;center
: les éléments s'alignent au centre du conteneur ;baseline
: les éléments s'alignent à la ligne de base du conteneur ;stretch
: les éléments sont étirés verticalement.
Pour décider de la directon (de gauche à droite, de haut en bas, etc.), on utilise la propriété
flex-diection
..container {
flex-direction: row | row-reverse | column | column-reverse;
}
row
dans le sens du texte ;row-reverse
dans le sens opposé de celui du texte ;column
: de haut en bas ;column-reverse
: de bas en haut.
Pour décider si les éléments doivent tenir sur une ligne ou occuper plusieurs lignes, on utilise la propriété
flex-wrap
..container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
nowrap
: tous les éléments sont écrasés pour tenir sur une ligne ;wrap
: s'il n'y a pas la place en fin de ligne, on passe à la lignesuivante ;wrap-reverse
: idem sauf que la première ligne se situe tout en bas.
On peut combiner
flex-diection
et flex-wrap
en flex-flow
:.container {
flex-flow: <flex-direction> || <flex-wrap>;
}
Par défaut,
flex-flow
vaut row wrap
.Pour aligner veticalement plusieurs lignes, on utiliser la propriété
align-content
..container {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
flex-start
: Les lignes s'alignent en haut ;flex-end
: les lignes s'alignent en bas ;center
: les lignes s'alignent au centre du conteneur ;space-between
: les lignes sont séparées d'un même espacement ;space-around
: les lignes sont entourées d'un même espacement ;stretch
: les lignes s'étirent en hauteur pour remplir l'espace.
On peut positionner verticalement un élément lui-même en lui donnant la propriété
align-self
..element {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
Par défaut, les éléments sont affichés dans l'ordre du code. On peut changer cet ordre d'affichage des éléments en leur donnant un ordinal :
.element {
order: <entier>;
}
Les éléments sont affichés de l'ordre croissant. Cette propriété vaut 0 par défaut.
Dernière mise à jour 3yr ago