3 Hacks Flexbox CSS que tu dois absolument connaître

29/01/2025 • Melvynx

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.

<style>
  .navbar {
    display: flex;
    background: #1e293b;
    padding: 1rem;
    gap: 1rem;
    align-items: center;
    border-radius: 0.5rem;
  }

  .logo {
    background: rgba(239, 68, 68, 0.5);
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
  }

  .spacer {
    flex: 1;
  }

  .button {
    background: rgba(59, 130, 246, 0.5);
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    color: white;
    text-decoration: none;
  }
</style>

<nav class="navbar">
  <div class="logo">Logo</div>
  <div class="spacer"></div>
  <a href="#" class="button">Me voilà à droite !</a>
</nav>

Open Sandbox

CSS

.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 !

<style>
  .container {
    display: flex;
    background: #1e293b;
    padding: 1rem;
    gap: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
  }

  .content {
    background: rgba(239, 68, 68, 0.5);
    padding: 1rem;
    border-radius: 0.375rem;
    flex: 1;
  }

  .sidebar {
    background: rgba(59, 130, 246, 0.5);
    padding: 1rem;
    border-radius: 0.375rem;
    width: 200px;
  }

  .sidebar.no-shrink {
    flex-shrink: 0;
  }
</style>

<div class="container">
  <div class="content">Un long contenu qui prend beaucoup de place...</div>
  <div class="sidebar">Je me fais écraser 😢</div>
</div>

<div class="container">
  <div class="content">Un long contenu qui prend beaucoup de place...</div>
  <div class="sidebar no-shrink">Avec flex-shrink: 0,<br>je garde ma taille ! 😎</div>
</div>

Open Sandbox

CSS

/* 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 !

<style>
  .container {
    display: flex;
    background: #1e293b;
    padding: 1rem;
    border-radius: 0.5rem;
    height: 200px;
    align-items: center;
    justify-content: center;
  }

  .box {
    background: rgba(59, 130, 246, 0.5);
    padding: 2rem;
    border-radius: 0.375rem;
    text-align: center;
  }
</style>

<div class="container">
  <div class="box">Parfaitement centré !<br>🎯</div>
</div>

Open Sandbox

CSS

.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 :

<style>
  .navbar {
    display: flex;
    background: #1e293b;
    padding: 1rem;
    gap: 1rem;
    align-items: center;
    border-radius: 0.5rem;
  }

  .menu {
    display: flex;
    gap: 0.5rem;
  }

  .menu-item {
    background: rgba(239, 68, 68, 0.5);
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    color: white;
    text-decoration: none;
  }

  .logo {
    background: rgba(234, 179, 8, 0.5);
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    flex-shrink: 0;
  }

  .spacer {
    flex: 1;
  }

  .button {
    background: rgba(59, 130, 246, 0.5);
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    color: white;
    text-decoration: none;
    flex-shrink: 0;
  }
</style>

<nav class="navbar">
  <div class="menu">
    <a href="#" class="menu-item">Menu 1</a>
    <a href="#" class="menu-item">Menu 2</a>
  </div>
  <div class="spacer"></div>
  <div class="logo">LOGO</div>
  <div class="spacer"></div>
  <a href="#" class="button">Login</a>
</nav>

Open Sandbox

Dans cet exemple, on utilise :

Deux flex: 1 pour centrer le logo
flex-shrink: 0 sur le logo et le bouton
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 :

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