Flexbox — Align-items

Introduction

Sur l'axe secondaire, on peut également changer la position des éléments enfants en utilisant la propriété align-items:

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

Exercice

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