Flexbox — Justify-content

Introduction

Il est possible de changer la répartition des éléments enfants sur l'axe principal en utilisant la propriété justify-content:

Exemple interactif
flex-direction:
height:
justify-content:
<div class="container">
<div>Répartir</div>
<div>les</div>
<div>trucs</div>
</div>
.container {
  display: flex; 
}
justify-content: start; est la valeur par défaut des éléments flexbox.

Exercices

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

<div class="container">
  <div>1</div>
  <div>2</div>
</div>
Zone éditable
<style>
  .container {
    height: 250px;
    /* 🦊 Compléter pour reproduire ceci:
      ----------------

      1

      2

      ----------------
    */
  }
  .container div {
    background-color: #f0f0f0;
    padding: 1rem;
  }

</style>

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