Flex

Le HTML de base est composé d'un conteneur div qui contient 5 items div.

1
<div class="container">
2
  <div class="item">1</div>
3
  <div class="item">2</div>
4
  <div class="item">3</div>
5
  <div class="item">4</div>
6
  <div class="item">5</div>
7
</div>
1
2
3
4
5
Flex

Méthodedisplay : flex

La propriété transforme le conteneur en conteneur flexible, et tous ses enfants directs deviennent des éléments flexibles. Ils s’alignent automatiquement sur une seule ligne.

See the Pen flex-1-base by Vincent-Vanneste (@vincent-vanneste) on CodePen.

flex-1-base

Méthodejustify-content

Permet de répartir sur l’axe principal (horizontal).

See the Pen flex-2-justify-content by Vincent-Vanneste (@vincent-vanneste) on CodePen.

flex-2-justify-content

Méthodeflex-basis

Définit la taille de base (largeur) de chaque élément avant application de flex-grow et flex-shrink.

See the Pen flex-3-flex-basis by Vincent-Vanneste (@vincent-vanneste) on CodePen.

flex-3-flex-basis

Méthodeflex-wrap

Permet de passer à la ligne si les éléments ne rentrent pas sur une seule ligne.

See the Pen flex-4-flex-wrap by Vincent-Vanneste (@vincent-vanneste) on CodePen.

flex-4-flex-wrap

Méthodealign-content

Contrôle l’espacement vertical entre les lignes (quand il y a plusieurs lignes grâce à flex-wrap).

See the Pen flex-5-align-content by Vincent-Vanneste (@vincent-vanneste) on CodePen.

flex-5-align-content

Méthodealign-items

Aligne les éléments à l’intérieur de la ligne, verticalement.

See the Pen flex-6-align-items by Vincent-Vanneste (@vincent-vanneste) on CodePen.

flex-6-align-items

Méthodealign-self

Permet de modifier l’alignement vertical d’un seul élément (indépendant des autres).

See the Pen flex-7-align-self by Vincent-Vanneste (@vincent-vanneste) on CodePen.

flex-7-align-self

Méthodeflex-grow

Contrôle la capacité d’un élément à grandir pour occuper l’espace disponible.

See the Pen flex-8-flex-grow by Vincent-Vanneste (@vincent-vanneste) on CodePen.

flex-8-flex-grow

Méthodeflex-shrink

Contrôle la capacité d’un élément à rétrécir quand il n’y a plus assez d’espace.

See the Pen flex-9-flex-shrink by Vincent-Vanneste (@vincent-vanneste) on CodePen.

flex-9-flex-shrink