Flexbox — Gap

Introduction

La propriété gap permet de définir l'espacement entre les éléments enfants d'un conteneur Flexbox. C'est une propriété très pratique pour créer des layouts aérés et lisibles.

Exemple interactif
flex-direction:
gap:
10px
<div class="container">
<div>Espacer</div>
<div>les</div>
<div>trucs</div>
</div>
.container {
  display: flex; 
  gap: 10px;
}

Exercice

Zone éditable
<style>
  .container {
    /* 🦊 Compléter pour avoir de 20px d'espace horizontal entre les éléments */
  }
  .container div {
    background-color: #f0f0f0;
    padding: 1rem;
  }
</style>

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