Flexbox — Introduction

Introduction

Flexbox est un système de layout flexible pour créer des layouts complexes en CSS qui peuvent s'adapter à différentes tailles d'écran et de contenu.

Cet exemple illustre très simplement comment Flexbox peut être utilisé pour créer 4 layouts différents en utilisant les propriétés flexbox de base. Grâce à sont fonctionnement fluide, Flexbox permet de créer des layouts qui s'adaptent à différentes tailles d'écran et de contenu.

Voici le code simplifié de cet exemple:

form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
 
.name {
  flex-grow: 1;
  flex-basis: 160px;
}
 
.email {
  flex-grow: 3;
  flex-basis: 200px;
}
 
button {
  flex-grow: 1;
  flex-basis: 80px;
}

Toute cette documentation est basée sur le magnifique travail de Josh W Comeau et adaptée pour convenir à mon cours. Je vous recommande fortement de lire son guide pour approfondir certains sujets.

Le flux du document

Le modèle de boîte CSS est basé sur un flux de document. Cela signifie que les éléments HTML sont affichés les uns après les autres, de haut en bas, de gauche à droite. C'est le comportement par défaut des éléments HTML.

On connaît déjà deux types de modèles de boîtes CSS: le modèle en ligne et le modèle en bloc.

div {
  display: block; /* C'est la valeur par défaut du div. */
}
 
span {
  display: inline; /* C'est la valeur par défaut du span. */
}

On peut donc changer le comportement par défaut d'un élément en utilisant la propriété display: display: inline sur mon élément div le transformera en élément en ligne, tandis que display: block sur mon élément span le transformera en élément en bloc.

Il existe également display: inline-block qui combine les avantages des deux modèles de boîtes.

Le mode d'affichage

On est très vite limité par ce modèle de boîte, surtout lorsqu'on cherche à créer des layouts complexes. C'est là qu'intervient le mode d'affichage Flexbox.

Lorsqu'on passe un élément en display: flex, on le transforme en flex container. Cela signifie que l'élément parent devient un conteneur flex et que ses enfants deviennent des éléments flex qui respectent les règles de positionnement Flexbox.

Pour activer le mode d'affichage Flexbox, on redéfinit simplement la propriété display de notre élément.

div {
  display: flex;
}

Il est utile de savoir que display: inline-flex existe également. La différence entre les deux est que display: flex crée un conteneur flex de type bloc, tandis que display: inline-flex crée un conteneur flex de type en ligne.

<div class="container">

<div>Apprendre</div>

<div>display</div>

<div>flex</div>

</div>

<div class="container">

<div>CSS</div>

<div>is</div>

<div>easy</div>

</div>

.container {
  
}

Exercice

<style>
  .container {
    /* 🦊 Activer le mode d'affichage Flexbox ici */
  }
  .container div {
    background-color: #f0f0f0;
    padding: 1rem;
  }
</style>

<div class="container">
  <div>1</div>
  <div>2</div>
</div>