CSS • Page 5 / Flexbox

Flexbox : aligner et distribuer facilement

Flexbox est un système de mise en page moderne qui rend très simple : centrer, aligner, espacer des éléments dans un container.

1. Activer Flexbox sur un conteneur

Pour utiliser Flexbox, il suffit d’ajouter display: flex; sur un élément parent. Tous ses enfants deviennent des “flex items”.

.conteneur {
  display: flex;
}

Exemple HTML

<div class="conteneur">
  <div>Bloc 1</div>
  <div>Bloc 2</div>
  <div>Bloc 3</div>
</div>

Exemple CSS

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

gap ajoute un espacement entre les items.

Quelle propriété doit-on mettre sur le parent pour activer Flexbox ?

2. Direction : row ou column

La propriété flex-direction choisit le sens principal :

row (par défaut) → de gauche à droite
column → de haut en bas

.conteneur {
  display: flex;
  flex-direction: row;    /* ou column */
}

Quel valeur de flex-direction affiche les éléments en colonne ?

3. Justify-content & align-items

justify-content

Aligne les items sur l’axe principal (horizontal si row, vertical si column).

flex-start : au début
center : au centre
flex-end : à la fin
space-between : espace entre les items
space-around, space-evenly

align-items

Aligne les items sur l’axe secondaire.

stretch (par défaut)
flex-start
center
flex-end

.conteneur {
  display: flex;
  justify-content: center;
  align-items: center;
}

Pour centrer des items au milieu d’un conteneur (horizontalement et verticalement), on utilise souvent :

4. Mini labo Flexbox

Teste différents réglages pour comprendre comment les éléments bougent.

flex-direction : justify-content : align-items :

Essaie : flex-direction: row;, justify-content: space-between;, align-items: center; → configuration classique pour une barre de navigation.

5. flex-grow, flex-shrink, flex-basis (simple)

Sur les éléments eux-mêmes, la propriété flex permet de contrôler leur largeur.

.item {
  flex: 1;  /* équivalent à flex: 1 1 0 */
}

flex-grow : capacité à prendre plus de place
flex-shrink : capacité à rétrécir
flex-basis : taille de base

.item-large {
  flex: 2;  /* prendra environ 2x plus de place que un item avec flex:1 */
}

Si trois éléments ont respectivement flex: 1, flex: 1, flex: 2, lequel sera le plus large ?

6. Mini-projet : barre de navigation + cartes en flex

Crée une page flex-layout.html + un fichier flex-layout.css avec :

Une barre de navigation en haut :
- un logo à gauche,
- des liens à droite,
- le tout aligné avec Flexbox.
Une section avec 3 cartes mises côte à côte en desktop (et en colonne sur mobile) :
- utilise display: flex; sur le conteneur,
- gap pour l’espace,
- flex-wrap: wrap; pour permettre le retour à la ligne.

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cartes {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.carte {
  flex: 1 1 250px;
}

Ça commence à ressembler à un vrai site pro 👀 Tu pourras réutiliser cette structure pour ton portfolio, un site de serveur RP, etc.

← Retour à CSS page 4 Suite (optionnel) : transitions & effets →