Flexbox — Flex-direction

Introduction

En activant le mode d'affichage Flexbox sur un élément parent, on constate que les éléments enfants sont affichés les uns à côté des autres, de gauche à droite. C'est le comportement par défaut de Flexbox.

On peut tout à fait basculer ce comportement en changeant la direction de l'affichage:

div {
  display: flex; /* Ne pas oublier de passer en Flexbox */
  flex-direction: column;
}

<div class="container">

<div>Apprendre</div>

<div>flex</div>

<div>direction</div>

</div>

.container {
  display: flex;
}

Les axes

Avec flex-direction: row, l'axe principal s'étend horizontalement de gauche à droite. Quand on bascule la valeur vers flex-direction: column, l'axe principal s'étend verticalement de haut en bas.

En Flexbox, tout est basé sur l'axe principal. Les propriétés que nous allons découvrir par la suite sont toutes structurées autour de cet axe et de l'axe secondaire qui s'étend perpendiculairement.

Les valeurs par défaut suivent ces 2 règles:

1. Axe principal: les enfants sont groupés au début (start) de leur conteneur.
2. Axe secondaire: les enfants s'étirent (stretch) dans leur conteneur.

Exercice

<style>
  .container {
    /* 🦊 Afficher les éléments en colonnes */
  }
  .container div {
    background-color: #f0f0f0;
    padding: 1rem;
  }
</style>

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