Apprendre Flexbox en 10 minutes

Introduction

Flexbox est l’une des fonctionnalités les plus puissantes de CSS pour créer des mises en page modernes.
Il permet d’aligner, de centrer et de distribuer les éléments d’une page sans avoir recours à des calculs compliqués de marges ou de flottants.

👉 Dans cet article, je vais te montrer les bases de Flexbox pour que tu puisses l’utiliser rapidement dans tes projets web.

Qu’est-ce que Flexbox ?

Flexbox (ou Flexible Box Layout) est un modèle d’organisation en CSS qui facilite la gestion des espaces entre les éléments d’un conteneur.
Il est très utilisé en responsive design, car il permet d’adapter facilement l’affichage sur ordinateur, tablette et mobile.

Exemple de base

Voici un exemple simple d’utilisation de Flexbox :

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

.container {
  display: flex;
  justify-content: center; /* centre horizontalement */
  align-items: center;    /* centre verticalement */
  height: 200px;
  background: #222;
}

.box {
  background: #ff9500;
  color: white;
  padding: 20px;
  margin: 10px;
  border-radius: 5px;
}

👉 Résultat : les trois boîtes s’affichent alignées et centrées.

Les propriétés principales de Flexbox

  • display: flex; → active Flexbox.

  • justify-content → contrôle l’alignement horizontal (flex-start, center, space-between, etc.).

  • align-items → contrôle l’alignement vertical (flex-start, center, stretch, etc.).

  • flex-direction → définit le sens des éléments (row, column).

  • flex-wrap → permet le retour à la ligne automatique.

Exemple pratique : créer une navigation

<nav class="menu">
  <a href="#">Accueil</a>
  <a href="#">À propos</a>
  <a href="#">Projets</a>
  <a href="#">Contact</a>
</nav>

.menu {
  display: flex;
  justify-content: space-around;
  background: #0B0F14;
  padding: 15px;
}

.menu a {
  color: #ff9500;
  text-decoration: none;
  font-weight: bold;
}

👉 Résultat : un menu responsive, simple et centré.

Conclusion

En moins de 10 minutes, tu connais les bases de Flexbox :

  • activer display: flex

  • gérer l’alignement avec justify-content et align-items

  • choisir l’orientation avec flex-direction

⚡ Flexbox est un incontournable pour créer des interfaces modernes et responsives.

➡️ Dans un prochain article, je parlerai de CSS Grid, encore plus puissant pour organiser des mises en page complexes.

Retour en haut