Le guide complet sur Flexbox CSS

Flexbox est le diminutif de Flexible Box Layout. Il s'agit d'une des fonctionnalités du langage de programmation CSS. Mais ça, on s'en fiche pas mal. Le plus important, c'est de comprendre comment l'utiliser.

Pour comprendre comment fonctionne Flexbox et comment l'utiliser, nous allons devoir comprendre le principe même sur lequel repose tout : les axes.

Mais avant de commencer par là, voici le programme de ce guide complet sur Flexbox !

Table des matières

• D'où vient Flexbox ?
• Pourquoi utiliser Flexbox ?
• Comment utiliser Flexbox : un conteneur et des éléments
• Aligner côte à côté les éléments
• Espacer les éléments
• Donner une direction aux éléments (flex-direction)
• Les colonnes et les lignes
• Modifier l'étendu des éléments (inline-flex)
• Définir l'ordre des éléments (order)
• Centrer horizontalement et verticalement
• Utiliser Flexbox sur plusieurs lignes (flex-wrap)
• Aller plus vite avec la propriété raccourcie (flex-flow)
• Tableau de compatibilité des navigateurs
• Pour aller plus loin
• Comment s'entraîner avec Flexbox ?

D'où vient Flexbox ?

Issu d'une nouvelle "First public draft" par le W3C en 2009 (le consortium qui donne les recommandations pour les prochains standards pour le web), ce n'est que 4 ans plus tard, en 2012, que Flexbox passe en "Candidate recommendation". 

Depuis ce jour, Flexbox est très rapidement devenu une des manières d'organiser son CSS les plus utilisées au monde. Cette nouvelle fonctionnalité étant par la même occasion rapidement récompensée par le magazine Net en 2013 comme "Best new web technology".

Pourquoi utiliser Flexbox ?

Avant l'année 2012, les moyens permettant aux développeurs de structurer leur site étaient assez peu nombreux.

Il n'y avait que deux possibilités pour aligner les éléments :

• Avec les flottants (float)
• Avec les éléments inline-block

Et ça, c'était pas la joie à utiliser tout le temps. 

Heureusement, avec l'arrivée de Flexbox, tout est beaucoup plus simple : centrer au milieu de la page ou encore simplement mettre deux éléments côté à côté est d'une facilité déconcertante.

Comment utiliser Flexbox ?

Pour utiliser Flexbox, il y a un principe simple à comprendre. Tout tourne autour :

• d'un conteneur (un élément parent)
• et des éléments enfants

Partons sur un exemple basique. Voici un code HTML classique :

<div id="conteneur">
    <div class="enfant"></div>
    <div class="enfant"></div>
    <div class="enfant"></div>
</div>

Rien de très nouveau dans ce code HTML. Nous avons bien un élément parent avec un id conteneur qui regroupe trois éléments enfants ayant une classe enfant.

Ajoutons de la couleur pour facilement voir les différents éléments. Attaquons le CSS :

.enfant {
  background-color: blue;
  padding: 100px;
  border-radius: 50px;
}

Nous avons donc ce résultat :

Notre objectif est simple : nous voulons aligner côte à côte les trois éléments.

Aligner côte à côte les éléments

Pour aligner côte à côte les éléments, nous allons devoir utiliser une nouvelle propriété.

Cette nouvelle propriété va nous permettre d'activer Flexbox sur notre navigateur. Elle se place sur l'élément parent.

#conteneur {
    display: flex;
}

Et voici le résultat :

Avec une seule propriété, nous venons d'aligner côte à côte nos éléments ! Par le passé, nous aurions dû jouer avec les propriétés inline-block par exemple. Ceci aurait été long et compliqué. Avec Flexbox, c'est rapide.

Espacer les éléments

Nos éléments sont maintenant côte à côte, mais ils sont tout de même trop collés.

Nous aurions pu jouer avec les marges externes grâce à margin, mais il y a encore plus simple.

Alors, comment espacer les éléments grâce à Flexbox CSS ? Grâce à la propriété gap !

Voici ce que nous allons ajouter à notre élément conteneur :

#conteneur {
  display: flex;
  gap: 10px;
}

Voici le résultat de la propriété gap avec Flexbox :

Plus sympa non ? :)

Pour la suite de ce guide complet sur Flexbox CSS, nous allons numéroter nos éléments.

Voici notre nouveau code HTML :

<div id="conteneur">
    <div class="enfant">1</div>
    <div class="enfant">2</div>
    <div class="enfant">3</div>
</div>

Nous ajoutons également une propriété color: white sur la classe .enfant pour avoir ce résultat :

Maintenant que nos éléments sont identifiés, voyons ensemble comment donner une direction aux éléments avec Flexbox !

Donner une direction aux éléments

Selon les scénarios et selon les circonstances, il n'est pas rare de vouloir inverser nos éléments. Si vous créez des designs pour des pays arabes, vous voudrez éventuellement inverser le sens des éléments pour tenir compte de leurs sens d'écriture.

Avec Flexbox, nous pouvons choisir la direction des éléments grâce à la propriété flex-direction.

Voici comment l'utiliser :

#conteneur {
  display: flex;
  gap: 10px;
  flex-direction: row-reverse;
}

Et le résultat :

Comme nous le constatons, les éléments ont été inversés.

Nous y sommes parvenus avec la valeur row-reverse sur la propriété flex-direction. Cette valeur nous propose (comme son nom le suppose) de renverser la ligne pour que le premier élément devienne le dernier, et ainsi de suite.

Il existe quatre valeurs différentes pour la propriété flex-direction. Les voici toutes expliquées :

• row (par défaut) -  les éléments sont placés de gauche à droite sur la ligne
• row-reverse - les éléments sont placés de droite à gauche sur la ligne
• column - les éléments sont placés de haut en bas sur la colonne
• column-reverse - les éléments sont placés de bas en haut sur la colonne

Nous avons pour le moment vu que les éléments se placent sur une même ligne, de gauche à droite (avec row) ou de droite à gauche (avec row-reverse). Mais il se trouve que nous pouvons aussi placer nos éléments dans une colonne. Faisons un point dessus.

Les colonnes et les lignes

Avec Flexbox, tout est délimité par les lignes et les colonnes. Les éléments sont en réalité alignés par rapport à un de ces deux axes : l'axe des abscisses et l'axe des ordonnées.

Il est possible de changer l'orientation de l'alignement de ces éléments en changeant la valeur de la propriété flex-direction. En voici un exemple pour la valeur column.

#conteneur {
  display: flex;
  gap: 10px;
  flex-direction: column;
}

Et le résultat :

Modifier l'étendu des éléments

Il est possible de modifier l'étendu des éléments. C'est-à-dire l'espace qu'ils occupent sur la page.

Concrètement, nous pouvons faire en sorte que nos éléments ne prennent que la largeur de leur contenu (ou du style CSS).

Voici comment nous pouvons faire : il suffit de préciser que nous voulons des éléments de type inline-block et non pas des éléments de type block.

Pour ce faire, nous le précisons avec le code CSS.

#conteneur {
  display: inline-flex;
  gap: 10px;
  flex-direction: column;
}

Et le résultat :

Définir l'ordre des éléments

Avec Flexbox, il est possible de préciser la position d'un élément.

Pour ce faire, nous avons la possibilité d'utiliser la propriété order. Elle prend comme valeur la position à laquelle nous voulons que l'élément soit.

On ajoute cette propriété sur l'élément que nous voulons positionner. Par exemple, pour positionner l'élément numéro 1, nous pouvons faire ceci :

<div id="conteneur">
    <div class="enfant enfant-1">1</div>
    <div class="enfant enfant-2">2</div>
    <div class="enfant enfant-3">3</div>
</div>

On ajoute une autre classe sur chaque enfant (enfant-1 / enfant-2 / enfant-3).

.enfant-1 {
  order: 2;
}

.enfant-2 {
  order: 1;
}

.enfant-3 {
  order: 3;
}

Pour chacune de ces classes, on ajoute ensuite la propriété order.

Il est important de préciser pour chaque élément leur ordre afin que cette propriété fonctionne. Si vous précisez seulement order pour la classe enfant-1, ce dernier sera placé en dernier - sauf si vous lui donnez une position inférieure à 1.

Centrer horizontalement et verticalement

Centrer horizontalement

Grâce à Flexbox, nous avons également la possibilité de centrer horizontalement et verticalement n'importe quel élément sur la page.

Si vous aussi vous passiez des heures à centrer vos éléments : cette époque est terminée !

Commençons par voir ensemble comment centrer horizontalement avec Flexbox. Il suffit pour cela d'utiliser la propriété justify-content.

#conteneur {
  display: flex;
  gap: 10px;
  justify-content: center;
}

Voici le résultat.

En regardant de plus près, on peut centrer nos éléments dans toutes les directions :

• start (par défaut) - Permet de centrer les éléments à gauche (ou à droite si dans un pays arabe)
• center - Permet de centrer les éléments sur le centre
• space-between - Permet de repousser les éléments avec de l'espace au centre
• space-around - Permet de repousser les éléments avec de l'espace proportionnel entre les éléments et la moitié de cet espace sur le côté gauche du premier élément et le côté droit du dernier
• space-evenly - Permet de repousser les éléments avec le même espace de tous les côtés

Par exemple, voici le résultat de space-around (parce que ce n'est pas évident à comprendre).

Comme vous pouvez le voir, nous avons un espace qui est proportionnel pour chaque côté. L'espace entre deux éléments correspond bien à l'addition de l'espace droite de l'élément 1 et de l'espace gauche de l'élement 2 ce qui donne un espace deux fois plus grand.

Centrer verticalement

Pour centrer verticalement avec Flexbox vous n'avez besoin que d'une seule propriété : align-items.

Elle permet de définir l'alignement pour tous les éléments d'un conteneur, soit pour tous les enfants. Plus spécifiquement, elle permet de définir la valeur align-self pour chaque élément.

Cette propriété align-self peut être utilisée sur la balise enfant, quand align-items peut être définie sur la balise parent.

Pour cet exemple, nous avons mis le fond en noir et ajouté height: 100vh afin que l'élément parent prenne 100% de la hauteur de la page (ce qui permet de mieux voir l'effet de align-items: center).

#conteneur {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  height: 100vh
}

On peut constater que nos trois éléments sont centrés verticalement. Ils sont également centrés horizontalement car nous avons laissé la propriété justify-content: center.

Comme nous l'avons vu, nous pouvons aussi combiner plusieurs propriétés align-self pour centrer les éléments indépendamment.

Voici un petit exemple.

#conteneur {
  display: flex;
  gap: 10px;
  justify-content: center;
  height: 100vh
}

.enfant-1 {
  align-self: start;
}

.enfant-2 {
  align-self: center;
}

.enfant-3 {
  align-self: end;
}

Et voici le résultat.

Chaque élément a une valeur différente de align-self :

• start (par défaut) - les éléments s'alignent en haut ou à gauche (selon l'orientation en ligne ou en colonne)
• center - les éléments s'alignent au centre
• end - les éléments s'alignent en bas ou à droite (selon l'orientation en ligne ou en colonne)

Utiliser Flexbox sur plusieurs lignes

Jusqu'à maintenant, nous avons utilisé Flexbox sur une seule ligne :

• de haut en bas (ligne)
• de gauche à droite (colonne)

Il est en réalité tout à fait possible d'utiliser Flexbox sur plusieurs lignes. Les éléments sont repoussés sur une nouvelle ligne quand il n'y a plus de place sur la ligne actuelle. Ce qui n'est pas le cas pour l'instant.

Par exemple voici à quoi ressemblent nos éléments s'ils sont au nombre de 9 :

<div id="conteneur">
    <div class="enfant">1</div>
    <div class="enfant">2</div>
    <div class="enfant">3</div>
    <div class="enfant">4</div>
    <div class="enfant">5</div>
    <div class="enfant">6</div>
    <div class="enfant">7</div>
    <div class="enfant">8</div>
    <div class="enfant">9</div>
</div>

.enfant {
  background-color: blue;
  padding: 100px;
  border-radius: 50px;
  color: white;
}

#conteneur {
  display: flex;
  gap: 10px;
}

body {
  background: #0E0E0E;
}

Et voici le résultat.

Comme on peut le constater, les éléments se poussent les uns par rapport aux autres ce qui crée un décalage sur l'axe horizontal (avec une barre pour scroller).

Pour faire en sorte que les éléments se retrouvent à la ligne quand il n'y a plus de place sur la ligne actuelle, on peut utiliser la propriété CSS flex-wrap.

Essayons d'ajouter la propriété flex-wrap: wrap sur notre identifiant #conteneur.

#conteneur {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

Voici le résultat.

Il faut savoir que cette nouvelle propriété flex-wrap peut contenir ces valeurs :

• nowrap (par défaut) - les éléments se poussent sur la même ligne
• wrap - les éléments qui n'ont plus de place sont décalés sur la ligne du dessous
• wrap-reverse - les éléments qui n'ont plus de place sont décalés sur la ligne du dessus

Aller plus vite avec la propriété raccourcie

Nous avons découvert deux propriétés : flex-direction et flex-wrap. Ces deux propriétés nous permettent de préciser l'organisation générale de Flexbox, c'est-à-dire, si nous souhaitons utiliser des colonnes ou des lignes, et si nous voulons faire de nouvelles colonnes ou de nouvelles lignes pour les éléments qui dépassent.

Il est possible d'aller encore plus vite en utilisant ce qu'on appelle une propriété raccourcie.

Comme son nom le suppose, elle permet de préciser la valeur de flex-direction et flex-wrap sur une seule propriété : flex-flow. En voici un exemple.

#conteneur {
    flex-direction: row;
    flex-wrap: wrap;
}

Et avec la propriété flex-flow :

#conteneur {
    flex-flow: row wrap;
}

Un jeu d'enfant ! Nous avons préciser comme première valeur la valeur pour flex-direction et comme deuxième valeur celle pour flex-wrap.

Il est important de respecter cet ordre. Il faut toujours préciser d'abord la valeur de flex-direction et après de flex-wrap.

Tableau de compatibilité des navigateurs

Flexbox est une fonctionnalité du langage CSS qui a tout changé pour les développeurs. Depuis sa sortie en 2012, elle a été largement rendu utilisable sur les navigateurs de tous les jours. Voici un tableau de compatibilité pour préciser à partir de quelle version vous pouvez utiliser Flexbox :

Si vous voulez une version encore plus récente pour un navigateur en particulier, tout est décrit sur le site caniuse. Comme vous pouvez le voir, Flexbox est désormais compatible avec tous les navigateurs les plus utilisés au monde. Vous pouvez donc l'utiliser.

Pour aller plus loin : Flexbox vs Grid

Mais que faire pour aller encore plus loin ?

Il se trouve qu'une autre fonctionnalité qui complète très bien l'utilisation de Flexbox repose sur les grilles CSS. Une grille organise les éléments à des positions précises, un peu comme ceci :

Comme on peut le voir, chaque élément peut occuper une ligne ou plus, et une colonne ou plus.

Utilisée avec Flebox, une grille permet de repousser complètement les limites du CSS tel que vous le connaissez.

Si vous voulez en savoir plus nous vous invitons à rejoindre notre formation complète sur HTML et CSS sans plus attendre.

Comment s'entraîner avec Flexbox ?

C'est génial tout ça mais moi je veux m'entraîner !

Si vous voulez vous entraîner avec Flexbox, rien de mieux qu'apprendre en s'amusant ! De nombreux développeurs partout dans le monde ont créé des sites dédiés à l'apprentissage de Flexbox. En voici quelques pistes.

Flexbox Froggy

Cet outil permet facilement de pratiquer Flexbox en essayant de faire bouger la grenouille sur le nénuphar.

Flexica islands

Cet outil est une alternative pour Flexbox Froggy. Amusez-vous bien en pratiquant Flexbox !