3 Hacks Flexbox CSS que tu dois absolument connaître

Tu galères avec certains layouts en CSS ? Tu as l'impression que tes éléments ne se comportent pas comme tu le voudrais ? Dans cet article, je vais te montrer 3 hacks Flexbox super utiles que j'utilise tous les jours.

1. Le hack du "flex: 1" pour pousser un élément à droite

C'est probablement le hack que j'utilise le plus souvent. Il permet de pousser un élément tout à droite d'un conteneur flex, peu importe la taille des autres éléments.

Le principe est simple : on met un élément invisible avec flex: 1 entre l'élément de gauche et celui qu'on veut pousser à droite.

.navbar {
  display: flex;
  gap: 1rem;
}

.spacer {
  flex: 1;
}

C'est tout ! Le flex: 1 va faire en sorte que l'élément "spacer" prenne tout l'espace disponible, poussant ainsi le bouton à droite.

Pourquoi ça marche ?

1. flex: 1 est un shorthand pour :
   • flex-grow: 1
   • flex-shrink: 1
   • flex-basis: 0
2. Avec flex-basis: 0, l'élément n'a pas de taille initiale
3. Avec flex-grow: 1, il prend tout l'espace disponible
4. Résultat : le bouton est poussé à droite !

2. Le hack du "flex-shrink: 0" pour éviter l'écrasement

Un problème courant avec flexbox : un élément qui se fait écraser quand il n'y a plus assez de place. La solution ? flex-shrink: 0 !

/* Avant : la sidebar se fait écraser */
.sidebar {
  width: 200px;
}

/* Après : la sidebar garde sa taille */
.sidebar {
  width: 200px;
  flex-shrink: 0;
}

Pourquoi c'est utile ?

1. Par défaut, flex-shrink: 1 permet aux éléments de rétrécir
2. C'est souvent ce qu'on veut, mais pas toujours
3. flex-shrink: 0 est parfait pour :
   • Les sidebars fixes
   • Les boutons d'action
   • Les logos
   • Les avatars

3. Le hack du centrage parfait

Le centrage vertical a longtemps été un cauchemar en CSS. Avec flexbox, c'est devenu super simple !

.container {
  display: flex;
  align-items: center; /* Centrage vertical */
  justify-content: center; /* Centrage horizontal */
}

Pourquoi c'est génial ?

1. Ça marche pour n'importe quelle taille de contenu
2. Pas besoin de connaître la hauteur ou la largeur
3. Ça reste centré même si le contenu change
4. Ça fonctionne même avec plusieurs éléments

Bonus : Combiner les hacks !

On peut combiner ces hacks pour créer des layouts plus complexes. Par exemple, une navbar avec un logo centré et un bouton à droite :

Dans cet exemple, on utilise :

1. Deux flex: 1 pour centrer le logo
2. flex-shrink: 0 sur le logo et le bouton
3. align-items: center pour l'alignement vertical

Pour aller plus loin

Ces hacks sont super utiles, mais ce ne sont que quelques exemples de ce que tu peux faire avec flexbox. Pour approfondir :

1. Le guide complet de Flexbox
2. Tout savoir sur flex-grow
3. Maîtriser flex-shrink

Tu peux aussi t'inscrire à mon cours gratuit sur Tailwind et CSS :