Flexbox

Avant flexbox, centrer une boîte verticalement demandait des astuces. Avec display: flex, il suffit de deux déclarations : justify-content et align-items.

Une ligne ou une colonne

Flexbox, le module CSS Flexible Box Layout, dispose un groupe de boîtes le long d'une ligne. Mets display: flex sur un conteneur : ses enfants directs, les éléments flex, s'alignent côte à côte au lieu de s'empiler. Cette seule déclaration suffit pour une barre de menu, une rangée de boutons ou une carte dont le pied doit rester en bas. Flexbox travaille dans une seule dimension à la fois : une ligne ou une colonne. Quand il te faut des lignes et des colonnes à la fois, grid, dans l'unité suivante, est en général le meilleur outil.

Deux axes

Tout, dans flexbox, se décrit avec deux axes. L'axe principal est la direction dans laquelle les éléments se suivent, fixée par flex-direction : row (par défaut) ou column. L'axe secondaire lui est perpendiculaire. justify-content répartit les éléments le long de l'axe principal : flex-start, center, flex-end, space-between (premier et dernier élément aux bords, espaces égaux entre eux) ou space-around. align-items les place sur l'axe secondaire : stretch (par défaut, tous les éléments aussi hauts que le plus haut), flex-start, center ou flex-end. Une boîte se centre donc dans les deux directions avec justify-content: center et align-items: center.

.bar {
  display: flex;
  justify-content: space-between;  /* logo left, menu right */
  align-items: center;             /* vertically centred */
  gap: 16px;                       /* space between items */
}
.cards { display: flex; flex-wrap: wrap; gap: 12px; }
.card  { flex: 1 1 200px; }        /* grow, shrink, start at 200px */

Espaces et retour à la ligne

gap place de l'espace entre les éléments sans en ajouter sur les bords extérieurs : c'est ce qu'on veut en général, et ce que les marges rendent compliqué. Par défaut, les éléments flex restent sur une seule ligne et rétrécissent pour tenir, quitte à être écrasés. flex-wrap: wrap leur permet de passer à la ligne quand la place manque : une rangée de quatre cartes sur un ordinateur portable peut devenir deux rangées de deux sur une tablette et une seule colonne sur un téléphone, sans aucune media query.

Comment les éléments grandissent et rétrécissent

Le raccourci flex sur un élément prend trois valeurs. flex-grow indique quelle part de l'espace restant l'élément prend par rapport à ses frères ; flex-shrink indique à quel point il accepte de rétrécir quand la place manque ; flex-basis est sa taille de départ avant de grandir ou de rétrécir. flex: 1 1 200px signifie : partir de 200 pixels, puis partager l'espace en plus à parts égales avec les autres éléments qui ont aussi un grow de 1. flex: 1 seul est le raccourci de 1 1 0%, qui donne à tous les éléments la même largeur. Donne flex-grow: 2 à un élément et 1 aux autres : il prend deux fois leur part de l'espace restant.

Ordre visuel et ordre réel

Flexbox peut changer l'ordre d'affichage des éléments, avec flex-direction: row-reverse ou la propriété order, sans toucher au HTML. Utilise cela avec prudence. Le focus clavier et les lecteurs d'écran suivent toujours l'ordre du HTML : si l'écran montre Contact avant Home mais que Tab passe d'abord par Home, les utilisateurs du clavier se perdent. Quand l'ordre compte pour le sens, change-le dans le HTML.