Flexbox

Au chapitre 5, nous avons rangé les cartes de la Librairie du Campus côte à côte avec inline-block, et noté deux défauts : un espace parasite entre les cartes, et des hauteurs inégales. Au chapitre 6, l'en-tête est devenu collant, mais son menu s'aligne mal sous le nom de la librairie. Ces trois problèmes ont la même cause : ni le flux normal ni le positionnement ne savent répartir des boîtes sur une ligne, ni les aligner entre elles.

Flexbox (le « module de boîtes flexibles ») est fait pour cela. On déclare un conteneur, et ses enfants directs se rangent sur un axe, se partagent la place disponible, s'alignent, passent à la ligne si on le permet. C'est l'outil des mises en page à une dimension : une barre de navigation, une rangée de boutons, une liste de cartes, une colonne qui pousse le pied de page en bas. Les grilles à deux dimensions seront l'affaire du chapitre 8.

7.1 Un premier conteneur flex

<ul class="menu">
  <li><a href="#">Accueil</a></li>
  <li><a href="#">Catalogue</a></li>
  <li><a href="#">Commander</a></li>
  <li><a href="#">Contact</a></li>
</ul>

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 16px;
  font-family: system-ui, sans-serif;
}

.menu {
  display: flex;
  gap: 1rem;
  padding: 0.5rem;
  margin: 0;
  list-style: none;
  background: #dbe4f0;
}

.menu li {
  padding: 0.25rem 0.5rem;
  background: #fff;
  border: 1px solid #1f3a68;
}

Une seule déclaration, display: flex, a suffi : les éléments de liste, qui s'empilaient, sont alignés sur une ligne, séparés de 1 rem par gap. Les liens sont restés des liens, la liste une liste.

7.2 Les deux axes

Tout Flexbox se raisonne sur deux axes perpendiculaires.

Retenir ce couple est la clé de tout le chapitre : en flex-direction: column, justify-content devient vertical et align-items horizontal. Les mots start et end des valeurs désignent le début et la fin de l'axe, et non la gauche ou la droite.

7.3 Répartir sur l'axe principal : justify-content

Trois éléments de 80 pixels dans un conteneur de 500 : il reste 260 pixels d'espace libre. justify-content décide où le mettre.

.rangee {
  display: flex;
  width: 500px;
}

.space-between {
  justify-content: space-between;
}

Les abscisses des trois éléments, mesurées dans Chromium par rapport au bord gauche du conteneur, confirment les calculs :

Avec space-around, chaque élément reçoit $260/3=86,67$ pixels, moitié à gauche, moitié à droite : les bords n'ont que 43,33 pixels, l'intervalle entre deux éléments le double.

7.3.1 gap

gap fixe un écart entre les éléments, jamais avant le premier ni après le dernier. Avec deux valeurs, la première est l'écart entre les lignes, la seconde entre les colonnes. C'est la bonne façon d'espacer des éléments flex : avec des marges, il faudrait retirer celle du dernier.

7.4 Aligner sur l'axe secondaire

align-items, sur le conteneur, place chaque élément dans la hauteur de sa ligne (pour une rangée). Ici, un conteneur de 90 pixels de haut et trois éléments de contenus différents :