Flexbox — Marge automatique

Introduction

On l'a déjà vu, margin: auto permet de centrer un élément dans son conteneur. Mais on peut aussi l'utiliser pour créer des espacements entre les éléments enfants d'un conteneur Flexbox.

Attention, cette marge s'applique à l'enfant ciblé directement, et pas le conteneur!

Exemple interactif
margin-left:
margin-right:
<div class="container">
<div class="el">
  Espacer
</div>
<div>un</div>
<div>truc</div>
</div>
.container {
  display: flex;
}

.el {
  
}

Exercice

Zone éditable
<style>
  .container {
    /* 🦊 Compléter pour reproduire:
      | 1  2      3 |
    */
  }
  .single {
    /* 🦊 Ajouter une marge automatique */
  }
  .container div {
    background-color: #f0f0f0;
    padding: 1rem;
  }
</style>

<div class="container">
  <div>1</div>
  <div>2</div>
  <div class="single">3</div>
</div>
RetourContinuer