3 Hacks Flexbox CSS que tu dois absolument connaître

29/01/2025 • Melvynx

Loading...

Content

  • 1. Le hack du "flex: 1" pour pousser un élément à droite
  • Pourquoi ça marche ?
  • 2. Le hack du "flex-shrink: 0" pour éviter l'écrasement
  • Pourquoi c'est utile ?
  • 3. Le hack du centrage parfait
  • Pourquoi c'est génial ?
  • Bonus : Combiner les hacks !
  • Pour aller plus loin

Reçois une formation gratuite sur nextreact

Courses

  • Formation React
  • Formation JavaScript
  • Formation Tailwind
  • Formation NextJS Full-Stack
  • Formation AI (Cursor / Copilot)
  • Formation HTML/CSS

Products

  • Codeline
  • Chat2Code
  • QuizUp
  • NOW.TS
  • Lumail
  • SaveIt.now
  • PadelTally.com

Popular articles

  • Mon année 2024
  • Mon année 2025
  • All articles

Categories

  • CSSCSS
  • HTMLHTML
  • JavaScriptJavaScript
  • Next.jsNext.js
  • ReactReact
  • TypeScriptTypeScript
codelynx.dev
Terms & Conditions•Privacy Policy•Refund Policy

Copyright © 2025 Codelynx LLC. All rights reserved.

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 on CodeSandboxOpen 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 ?

  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 !

<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 on CodeSandboxOpen 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 ?

  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 !

<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 on CodeSandboxOpen Sandbox
CSS
.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 :

<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 on CodeSandboxOpen Sandbox

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 :

Codelynx.dev
Posts