Flexbox — Retours à la ligne

Introduction

Quand le conteneur est trop petit pour afficher tous les éléments, il est possible de forcer un retour à la ligne en utilisant la propriété flex-wrap avec la valeur wrap.

Exemple interactif

flex-direction:

height:

justify-content:

align-items:

flex-wrap:

<div class="container">

<div>Euh</div>

<div>ça</div>

<div>fait</div>

<div>beaucoup</div>

<div>là</div>

<div>non?</div>

</div>

.container {
  display: flex; 
}

flex-wrap: nowrap; est la valeur par défaut.

Exercice

Zone éditable

<style>
  .container {
    /* 🦊 Une fois alignés horizontalement, on veut que les éléments 
       se mettent à la ligne quand ils manquent de place. */
  }
  .container div {
    background-color: #f0f0f0;
    padding: 1rem 5rem;
    border: 1px solid #ccc;
  }
</style>

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

Retour Continuer