Flexbox — Flex-shrink

Introduction

Quand un conteneur Flexbox n'a pas assez de place pour afficher tous ses enfants, flex-shrink décide quelles cartes rétrécir en priorité. La valeur par défaut est 1, ce qui signifie que tout le monde partage le manque d'espace. Une valeur plus élevée fait rétrécir l'élément plus vite, tandis que 0 le protège.

Exemple interactif
<div class="container">
Base: 300px
300px
<div class="el1"></div>
flex-shrink:
Base: 300px
300px
<div class="el2"></div>
flex-shrink:
Base: 300px
300px
<div class="el3"></div>
flex-shrink:
</div>
.container {
  display: flex;
  gap: 0.5rem;
}
.el1 {
  flex-basis: 300px;
  
}
.el2 {
  flex-basis: 300px;
  
}
.el3 {
  flex-basis: 300px;
  
}
Les éléments rétrécissent proportionnellement à flex-shrink × flex-basis lorsque l'espace manque. Avec flex-shrink: 0, la carte garde sa taille initiale et provoque un débordement.
En tout, il y a 3 parts d'espace en trop à répartir.
L'élément 1 prend 1 part de l'espace en trop.
L'élément 2 prend 1 part de l'espace en trop.
L'élément 3 prend 1 part de l'espace en trop.

Propriété flex

La propriété abrégée flex combine flex-grow, flex-shrink et flex-basis (flex: 1 0 200px). Quand on écrit flex: 1, on obtient en réalité flex: 1 1 0.

Exercice

Zone éditable
<style>
  .container {
    display: flex;
  }
  nav {
    flex-grow: 1; 
    flex-basis: 800px;
    background: lightblue;
  }
  .circle {
    /* 🦊 Ceci est un cas qui arrive très fréquemment.
      Des éléments se font écraser par un autre qui essaie 
      d'occuper trop de place dans le conteneur flex! 
      On veut donc interdire aux 2 cercles de se faire écraser. 
      Ils doivent être affichés sans déformation. */
    width: 100px;
    height: 100px;
    background: lightcoral;
    border-radius: 100px;
  }
</style>

<div class="container">
  <div class="circle"></div>
  <nav></nav>
  <div class="circle"></div>
</div>
RetourContinuer