Flexbox CSS

1
2
3
4
5
6
7
8

Essayez-le vous-même

Module de mise en page CSS Flexbox

Avant la sortie du module de mise en page Flexbox, les modèles de mise en page disponibles étaient les suivants:

  • Bloc (Block), utilisé pour une partie (section) du site web
  • En ligne (Inline), utilisé pour le texte
  • Tableau, utilisé pour les données de tableau binaire
  • Positionnement, utilisé pour la position explicite des éléments

Le module de mise en page Flexbox, qui permet de concevoir plus facilement des structures de mise en page réactives flexibles, sans avoir besoin d'utiliser des floats ou de la positionnement.

Support du navigateur

Tous les navigateurs modernes le supportent flexbox Propriétés.

29.0 11.0 22.0 10 48

Éléments Flexbox

Pour commencer à utiliser le modèle Flexbox, vous devez d'abord définir le conteneur Flex.

1
2
3

Les éléments ci-dessus représentent un conteneur flex avec trois éléments flex (zone bleue).

Exemple

Contient un conteneur flex avec trois éléments flex :

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Essayez-le vous-même

L'élément parent (conteneur) :

En utilisant : display La propriété est définie comme : flexLe conteneur flex sera :

1
2
3

Exemple

.flex-container {
  display: flex;
}

Essayez-le vous-même

Voici les propriétés du conteneur flex :

Propriété flex-direction

flex-direction La propriété définit dans quelle direction le conteneur doit empiler les éléments flex.

1
2
3

Exemple

column La valeur définit l'empilement vertical des éléments flex (de haut en bas) :

.flex-container {
  display: flex;
  flex-direction: column;
}

Essayez-le vous-même

Exemple

column-reverse La valeur empile les éléments flex verticalement (de bas en haut) :

.flex-container {
  display: flex;
  flex-direction: column-reverse;
}

Essayez-le vous-même

Exemple

row La valeur empile les éléments flex horizontalement (de gauche à droite) :

.flex-container {
  display: flex;
  flex-direction: row;
}

Essayez-le vous-même

Exemple

row-reverse La valeur empile les éléments flex horizontalement (de droite à gauche) :

.flex-container {
  display: flex;
  flex-direction: row-reverse;
}

Essayez-le vous-même

Propriété flex-wrap

flex-wrap La propriété indique si les éléments flex doivent être retournés.

L'exemple suivant contient 12 éléments flex pour mieux démontrer la propriété flex-wrap.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Exemple

wrap La valeur indique que les éléments flex seront retournés si nécessaire :

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

Essayez-le vous-même

Exemple

nowrap La valeur indique que les éléments flex ne seront pas retournés (par défaut) :

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

Essayez-le vous-même

Exemple

wrap-reverse La valeur indique que, si nécessaire, les éléments flex seront retournés dans un ordre inverse :

.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}

Essayez-le vous-même

Propriété flex-flow

flex-flow La propriété est une propriété abrégée utilisée pour définir simultanément les propriétés flex-direction et flex-wrap.

Exemple

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

Essayez-le vous-même

Propriété justify-content

justify-content La propriété est utilisée pour aligner les éléments flex :

1
2
3

Exemple

center La valeur aligne les éléments flex au centre du conteneur :

.flex-container {
  display: flex;
  justify-content: center;
}

Essayez-le vous-même

Exemple

flex-start La valeur aligne les éléments flex au début du conteneur (par défaut) :

.flex-container {
  display: flex;
  justify-content: flex-start;
}

Essayez-le vous-même

Exemple

flex-end La valeur aligne les éléments flex à l'extrémité du conteneur :

.flex-container {
  display: flex;
  justify-content: flex-end;
}

Essayez-le vous-même

Exemple

space-around La valeur affiche les éléments flex précédés, espacés et suivis d'espaces :

.flex-container {
  display: flex;
  justify-content: space-around;
}

Essayez-le vous-même

Exemple

space-between La valeur affiche les éléments flex espacés entre les lignes :

.flex-container {
  display: flex;
  justify-content: space-between;
}

Essayez-le vous-même

Propriété align-items

align-items La propriété est utilisée pour aligner verticalement les éléments flex.

1
2
3

Dans ces exemples, nous utilisons des conteneurs de 200 pixels de hauteur pour mieux démontrer la propriété align-items.

Exemple

center La valeur aligne les éléments flexibles au milieu du conteneur :

.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
}

Essayez-le vous-même

Exemple

flex-start La valeur aligne les éléments flexibles en haut du conteneur :

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
}

Essayez-le vous-même

Exemple

flex-end La valeur aligne les éléments flexibles en bas du conteneur :

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
}

Essayez-le vous-même

Exemple

stretch La valeur étire les éléments flexibles pour remplir le conteneur (par défaut) :

.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;
}

Essayez-le vous-même

Exemple

baseline La valeur aligne les éléments flexibles sur la ligne de base :

.flex-container {
  display: flex;
  height: 200px;
  align-items: baseline;
}

Essayez-le vous-même

Attention :Dans cet exemple, nous utilisons différentes valeurs de font-size pour démontrer que les éléments sont alignés sur la ligne de base du texte :

1
2
3
4

Propriété align-content

align-content La propriété est utilisée pour aligner les lignes flexibles.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Dans ces exemples, nous utilisons un conteneur de 600 pixels de hauteur et nous définissons la propriété flex-wrap sur wrap pour mieux démontrer la propriété align-content.

Exemple

space-between La valeur affiche des lignes flexibles avec des espaces égaux entre elles :

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-between;
}

Essayez-le vous-même

Exemple

space-around La valeur affiche les lignes flexibles avec des espaces avant, entre et après :

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-around;
}

Essayez-le vous-même

Exemple

stretch La valeur étire les lignes flexibles pour occuper l'espace restant (par défaut) :

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: stretch;
}

Essayez-le vous-même

Exemple

center La valeur affiche les lignes flexibles au milieu du conteneur :

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: center;
}

Essayez-le vous-même

Exemple

flex-start La valeur affiche les lignes flexibles au début du conteneur :

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-start;
}

Essayez-le vous-même

Exemple

flex-end La valeur affiche les lignes flexibles à la fin du conteneur :

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-end;
}

Essayez-le vous-même

Centrage parfait

Dans l'exemple suivant, nous résoudrons un problème de style très courant : centrage parfait.

Solution : Mettre justify-content et align-items Les propriétés sont réglées sur le centre, puis les éléments flexibles seront parfaitement centrés :

Exemple

.flex-container {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}

Essayez-le vous-même

Élément enfant (élément)

Les éléments directs des conteneurs flexibles deviennent automatiquement des éléments flexibles (flex).

1
2
3
4

Les éléments ci-dessus représentent quatre éléments flexibles bleus à l'intérieur d'un conteneur flexible gris.

Exemple

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div> 
  <div>4</div>
</div>

Essayez-le vous-même

Les propriétés utilisées pour les éléments flexibles sont :

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

Propriété order

order La propriété spécifie l'ordre des éléments flex.

1
2
3
4

Le premier élément flex dans le code n'a pas besoin d'être affiché en premier dans le layout.

order La valeur doit être un nombre, la valeur par défaut est 0.

Exemple

order La propriété peut changer l'ordre des éléments flex.

<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div> 
  <div style="order: 1">4</div>
</div>

Essayez-le vous-même

Propriété flex-grow

flex-grow La propriété spécifie combien un élément flexible va croître par rapport aux autres éléments flexibles.

1
2
3

Cette valeur doit être un nombre, la valeur par défaut est 0.

Exemple

Rend la vitesse de croissance du troisième élément flexible huit fois plus rapide que celle des autres éléments flexibles :

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div> 
</div>

Essayez-le vous-même

Propriété flex-shrink

flex-shrink La propriété spécifie combien un élément flexible va se rétrécir par rapport aux autres éléments flexibles.

1
2
3
4
5
6
7
8
9

Cette valeur doit être un nombre, la valeur par défaut est 0.

Exemple

Ne pas permettre au troisième élément flexible de se rétrécir autant que les autres éléments flexibles :

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

Essayez-le vous-même

Propriété flex-basis

flex-basis La propriété spécifie la longueur initiale des éléments flex.

1
2
3
4

Exemple

Définir la longueur initiale du troisième élément flexible à 200 pixels :

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis: 200px">3</div>
  <div>4</div>
</div>

Essayez-le vous-même

Propriété flex

flex C'est une propriété abrégée de flex-grow, flex-shrink et flex-basis.

Exemple

Rend le troisième élément flexible non augmentable (0), non rétractable (0) et de longueur initiale de 200 pixels :

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 0 200px">3</div>
  <div>4</div>
</div>

Essayez-le vous-même

Propriété align-self

align-self La propriété spécifie le mode d'alignement des éléments sélectionnés dans le conteneur flexible.

align-self Les propriétés couvriront le mode d'alignement par défaut défini par la propriété align-items du conteneur.

1
2
3
4

Dans ces exemples, nous utilisons un conteneur de 200 pixels de hauteur pour mieux démontrer la propriété align-self :

Exemple

Alignez le troisième élément élastique au centre du conteneur :

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center">3</div>
  <div>4</div>
</div>

Essayez-le vous-même

Exemple

Alignez le deuxième élément élastique en haut du conteneur, et le troisième élément élastique en bas du conteneur :

<div class="flex-container">
  <div>1</div>
  <div style="align-self: flex-start">2</div>
  <div style="align-self: flex-end">3</div>
  <div>4</div>
</div>

Essayez-le vous-même

Bibliothèque d'images responsive avec Flexbox

Créez une bibliothèque d'images responsive avec Flexbox, qui change entre quatre, deux ou des images pleine largeur en fonction de la taille de l'écran :

Essayez-le vous-même

Site web responsive avec Flexbox

Créez un site web responsive avec flexbox, y compris une navigation élastique et un contenu élastique :

Essayez-le vous-même

Propriétés CSS Flexbox

Le tableau suivant liste les propriétés CSS utilisées avec flexbox :

Propriété Description
display Définit le type de boîte utilisé pour les éléments HTML.
flex-direction Définit la direction des éléments élastiques dans le conteneur élastique.
justify-content Aligne horizontalement ces éléments lorsque les éléments élastiques n'utilisent pas tout l'espace disponible sur l'axe principal.
align-items Aligne verticalement ces éléments lorsque les éléments élastiques n'utilisent pas tout l'espace disponible sur l'axe principal.
flex-wrap Définit si les éléments élastiques doivent être retournés en ligne, s'il n'y a pas assez d'espace sur une ligne flex pour les contenir.
align-content Modifie le comportement de la propriété flex-wrap. Comme align-items, mais il aligne les lignes flex, pas les éléments élastiques.
flex-flow Abbréviation des propriétés flex-direction et flex-wrap.
order Définit l'ordre des éléments élastiques par rapport aux autres éléments élastiques dans le même conteneur.
align-self Utilisé pour les éléments élastiques. Couvre la propriété align-items du conteneur.
flex Abbréviation des propriétés flex-grow, flex-shrink et flex-basis.