Flexbox — Flex-basis

Introduction

flex-basis définit la taille de départ d'un élément flex sur l'axe principal. Par défaut, la valeur est auto, ce qui signifie que l'élément se base sur sa largeur/hauteur intrinsèque ou sur les propriétés width et height.

Contrairement à width, la base reste active même si l'on change la direction de l'axe: en row, la valeur contrôle la largeur; en column, elle contrôle la hauteur.

Définir la taille de base

flex-basis agit comme un point de départ. Une fois la base posée, Flexbox distribue ensuite l'espace restant (flex-grow) ou le manque d'espace (flex-shrink).

<div class="container">

<div class="el1"></div>

<div class="el2"></div>

<div class="el3"></div>

</div>

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

.el1 {
  flex-basis: 140px;
}

.el2 {
  flex-basis: auto;
}

.el3 {
  flex-basis: 200px;
}

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

<style>
  .container {
    display: flex;
    gap: 1rem;
    min-height: 220px;
  }
  .panel {
    background-color: #f0f0f0;
    border-radius: 8px;
    padding: 1rem;
  }
  .content {
    flex: 1;
  }
  .sidebar {
    /* 🦊 Réserver 220px pour ce bloc via flex-basis */
  }
  .credits {
    /* 🦊 Limiter ce bloc à 120px */
  }
</style>

<div class="container">
  <div class="panel sidebar">Navigation</div>
  <div class="panel content">Contenu principal</div>
  <div class="panel credits">Crédits</div>
</div>