Cours

HTML & CSS Leçon 6

Mettre en page avec Flexbox

Aligner des éléments côte à côte, les espacer et les centrer, sans prise de tête.

25 min

À la fin de cette leçon, tu sauras

  • Placer des éléments en ligne avec display: flex
  • Les espacer avec gap et justify-content
  • Les aligner verticalement avec align-items

Le problème

Par défaut, les blocs comme <div> ou <p> s'empilent les uns sous les autres. Pour un menu, une rangée de cartes ou un en-tête avec un logo à gauche et des liens à droite, il faut les mettre côte à côte. C'est le rôle de Flexbox.

display: flex

On l'applique au parent, la boîte qui contient les éléments. Ses enfants directs se mettent alors en ligne.

<style>
  .menu {
    display: flex;
    gap: 16px;
  }
</style>

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

gap met un espace régulier entre les enfants. C'est bien plus simple que d'ajouter des marges à chacun.

Répartir sur la ligne : justify-content

  • flex-start (par défaut) : tout à gauche ;
  • center : au centre ;
  • space-between : le premier tout à gauche, le dernier tout à droite, le reste réparti entre les deux ;
  • flex-end : tout à droite.

Aligner en hauteur : align-items

Quand les enfants n'ont pas la même hauteur, align-items: center les centre verticalement. C'est la fameuse recette pour centrer quelque chose au milieu d'une boîte :

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

Passer à la ligne : flex-wrap

Sur un petit écran, une rangée de cartes peut déborder. Avec flex-wrap: wrap, les enfants qui ne tiennent plus passent à la ligne suivante.

Astuce : pour voir ce que fait chaque propriété, change une valeur dans l'exercice et regarde le résultat bouger.

À toi de jouer

Construis un en-tête de site :

  • la classe .entete doit utiliser Flexbox ;
  • le logo à gauche et le menu à droite (space-between) ;
  • les éléments centrés verticalement ;
  • les liens du menu (.menu) en ligne, avec un espace de 16px entre eux.
index.html
Résultat
  • .entete utilise display: flex
  • Le logo est à gauche et le menu à droite (space-between)
  • Les éléments sont centrés verticalement
  • .menu utilise display: flex
  • Les liens du menu sont espacés de 16px
Bloqué ? Voir une solution 
<style>
  .entete {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .menu {
    display: flex;
    gap: 16px;
  }
</style>

<header class="entete">
  <strong>MonSite</strong>
  <nav class="menu">
    <a href="#">Accueil</a>
    <a href="#">Projets</a>
    <a href="#">Contact</a>
  </nav>
</header>

Quiz

1Sur quel élément écrit-on display: flex ?
2Quelle valeur met le premier élément à gauche et le dernier à droite ?
3Pour centrer des éléments verticalement dans une rangée flex, on utilise…