CSS - display: flex

Les flex boxes permet entre autre d'aligner et de positionner les élements au sein d'un conteneur.

Sources

• Flexbox Froggy

• CSS Tricks

Propriétés au niveau du parent

On commence par donner la propriété display: flex au conteneur.

.container {
  display: flex;
}

Alignement horizontal

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 plus

  d'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).

Alignement vertical au sein d'une ligne

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.

Direction

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.

Retour à la ligne

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 ligne

  suivante ;

• 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.

Alignement vertical de plusieurs lignes

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.

Au niveau de l'élément

Alignement d'un élément

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;
}

Ordre d'affichage d'un élément

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.