Retour • 29/01/2025
3 Hacks Flexbox CSS que tu dois absolument connaître
Écris par Melvyn Malherbe le 29/01/2025
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 ?
flex: 1
est un shorthand pour :flex-grow: 1
flex-shrink: 1
flex-basis: 0
- Avec
flex-basis: 0
, l'élément n'a pas de taille initiale - Avec
flex-grow: 1
, il prend tout l'espace disponible - 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 ?
- Par défaut,
flex-shrink: 1
permet aux éléments de rétrécir - C'est souvent ce qu'on veut, mais pas toujours
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 ?
- Ça marche pour n'importe quelle taille de contenu
- Pas besoin de connaître la hauteur ou la largeur
- Ça reste centré même si le contenu change
- Ç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 :
- Deux
flex: 1
pour centrer le logo flex-shrink: 0
sur le logo et le boutonalign-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 :
Tu peux aussi t'inscrire à mon cours gratuit sur Tailwind et CSS :
Maîtres le CSS avec TailwindCSS !
Récupère ton accès gratuit à 22 leçons interactives avec des exercices, des quiz et bien plus.