Explorer les directions flex dans CSS Flexbox

Introduction

Dans ce laboratoire, vous allez explorer les diverses directions flex disponibles dans CSS Flexbox, en acquérant une expérience pratique sur la manière dont les éléments peuvent être arrangés et positionnés dans un conteneur flex. En adoptant une approche étape par étape, vous créerez une structure HTML et implémenterez progressivement différentes propriétés de direction flex, y compris les orientations row, row-reverse, column et column-reverse.

Le laboratoire commence par la configuration d'un fichier HTML de base avec un conteneur flex et plusieurs éléments flex, fournissant une démonstration visuelle de l'impact de la direction flex sur la mise en page. En modifiant la propriété CSS flex-direction, vous allez apprendre à contrôler le flux et la positionnement des éléments, en comprenant les principes fondamentaux de CSS Flexbox et ses puissantes capacités de mise en page.

Configurez la structure HTML pour la démonstration de Flexbox

Dans cette étape, vous allez créer la structure HTML de base pour démontrer les directions de CSS Flexbox. Nous allons configurer un fichier HTML simple avec plusieurs éléments <div> qui nous aideront à explorer différentes directions flex.

Tout d'abord, ouvrez l'IDE Web et accédez au répertoire ~/projet. Créez un nouveau fichier appelé flexbox-demo.html en cliquant avec le bouton droit dans l'explorateur de fichiers et en sélectionnant "Nouveau fichier".

Copiez le code HTML suivant dans le fichier flexbox-demo.html :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Flexbox Direction Demo</title>
    <style>
      .flex-container {
        display: flex;
        border: 2px solid #333;
        margin-bottom: 20px;
        padding: 10px;
      }
      .flex-item {
        width: 100px;
        height: 100px;
        margin: 5px;
        background-color: #4caf50;
        color: white;
        text-align: center;
        line-height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div class="flex-item">Item 1</div>
      <div class="flex-item">Item 2</div>
      <div class="flex-item">Item 3</div>
      <div class="flex-item">Item 4</div>
    </div>
  </body>
</html>

Analysons les composants clés de cette structure HTML :

Nous avons créé un <div> avec la classe flex-container qui servira de conteneur flex.
À l'intérieur du conteneur, nous avons quatre éléments <div> avec la classe flex-item.
Dans la section <style>, nous avons ajouté du CSS de base pour :
- Définir display: flex sur le conteneur
- Donner une taille et une couleur d'arrière-plan fixes aux éléments flex
- Ajouter quelques styles de base pour la visibilité

Ce paramétrage initial fournit une structure propre et simple que nous utiliserons pour démontrer différentes directions flex dans les étapes suivantes.

Implémentez la direction flex row

Dans cette étape, vous allez découvrir la direction flex par défaut dans CSS Flexbox : la direction row. La direction row est la mise en page par défaut où les éléments flex sont positionnés horizontalement de gauche à droite.

Ouvrez le fichier flexbox-demo.html dans l'IDE Web et modifiez la section <style> pour définir explicitement la direction flex sur row :

<style>
  .flex-container {
    display: flex;
    flex-direction: row; /* Définissez explicitement la direction row (valeur par défaut) */
    border: 2px solid #333;
    margin-bottom: 20px;
    padding: 10px;
  }
  .flex-item {
    width: 100px;
    height: 100px;
    margin: 5px;
    background-color: #4caf50;
    color: white;
    text-align: center;
    line-height: 100px;
  }
</style>

Points clés sur la direction flex row :

Les éléments sont disposés horizontalement de gauche à droite
flex-direction: row est la valeur par défaut pour les conteneurs flex
Chaque élément conserve son ordre original
L'axe principal est horizontal
L'axe transversal est vertical

La sortie de l'exemple dans un navigateur web montrera quatre carrés verts disposés en ligne horizontale de gauche à droite.

Pour vous aider à comprendre la différence visuelle, notez comment les éléments sont naturellement positionnés côte à côte sans aucune configuration supplémentaire. Cela démontre le comportement de la direction flex row par défaut.

Implémentez la direction flex row-reverse

Dans cette étape, vous allez explorer la direction flex row-reverse, qui inverse l'ordre des éléments flex tout en maintenant une mise en page horizontale.

Ouvrez le fichier flexbox-demo.html dans l'IDE Web et modifiez la section <style> pour définir la direction flex sur row-reverse :

<style>
  .flex-container {
    display: flex;
    flex-direction: row-reverse; /* Inverse l'ordre des éléments horizontalement */
    border: 2px solid #333;
    margin-bottom: 20px;
    padding: 10px;
  }
  .flex-item {
    width: 100px;
    height: 100px;
    margin: 5px;
    background-color: #4caf50;
    color: white;
    text-align: center;
    line-height: 100px;
  }
</style>

Caractéristiques clés de la direction flex row-reverse :

Les éléments sont toujours disposés horizontalement
L'ordre est inversé de droite à gauche
Le premier élément apparaît maintenant sur le côté droit
L'axe principal reste horizontal mais commence à droite
L'axe transversal reste vertical

Lorsque vous visualisez cela dans un navigateur web, vous remarquerez que les éléments sont maintenant disposés de droite à gauche, avec "Item 4" apparaissant en premier sur le côté gauche et "Item 1" sur le côté droit.

Cela démontre comment flex-direction: row-reverse vous permet de changer l'ordre visuel des éléments flex tout en maintenant une mise en page horizontale.

Implémentez la direction flex column

Dans cette étape, vous allez explorer la direction flex column, qui dispose les éléments flex verticalement de haut en bas.

Ouvrez le fichier flexbox-demo.html dans l'IDE Web et modifiez la section <style> pour définir la direction flex sur column :

<style>
  .flex-container {
    display: flex;
    flex-direction: column; /* Affiche les éléments verticalement */
    border: 2px solid #333;
    margin-bottom: 20px;
    padding: 10px;
    height: 500px; /* Ajoute une hauteur pour visualiser la mise en page verticale */
  }
  .flex-item {
    width: 100px;
    height: 100px;
    margin: 5px;
    background-color: #4caf50;
    color: white;
    text-align: center;
    line-height: 100px;
  }
</style>

Caractéristiques clés de la direction flex column :

Les éléments sont maintenant disposés verticalement de haut en bas
L'axe principal est maintenant vertical
L'axe transversal est maintenant horizontal
Les éléments se superposent les uns sur les autres
Nous avons ajouté une hauteur au conteneur pour mieux visualiser la mise en page verticale

Lorsque vous visualisez cela dans un navigateur web, vous remarquerez que les éléments sont maintenant disposés verticalement :

"Item 1" sera en haut
"Item 2" sera en dessous de "Item 1"
"Item 3" sera en dessous de "Item 2"
"Item 4" sera en bas

Cela démontre comment flex-direction: column change la mise en page d'horizontale à verticale, offrant un moyen simple de créer des mises en page verticales à l'aide de Flexbox.

Implémentez la direction flex column-reverse

Dans cette étape, vous allez explorer la direction flex column-reverse, qui dispose les éléments flex verticalement de bas en haut.

Ouvrez le fichier flexbox-demo.html dans l'IDE Web et modifiez la section <style> pour définir la direction flex sur column-reverse :

<style>
  .flex-container {
    display: flex;
    flex-direction: column-reverse; /* Affiche les éléments verticalement de bas en haut */
    border: 2px solid #333;
    margin-bottom: 20px;
    padding: 10px;
    height: 500px; /* Ajoute une hauteur pour visualiser la mise en page verticale */
  }
  .flex-item {
    width: 100px;
    height: 100px;
    margin: 5px;
    background-color: #4caf50;
    color: white;
    text-align: center;
    line-height: 100px;
  }
</style>

Caractéristiques clés de la direction flex column-reverse :

Les éléments sont disposés verticalement de bas en haut
L'axe principal est vertical mais commence en bas
L'axe transversal est horizontal
Les éléments sont empilés dans l'ordre inverse
"Item 4" apparaîtra maintenant en haut
"Item 1" sera en bas du conteneur

Lorsque vous visualisez cela dans un navigateur web, vous observerez :

La mise en page verticale est maintenue
L'ordre des éléments est inversé par rapport à la direction column standard
La hiérarchie visuelle est inversée

Cela démontre comment flex-direction: column-reverse offre un moyen simple de changer l'ordre d'empilement vertical des éléments flex.

Sommaire

Dans ce laboratoire, les participants explorent les bases de CSS Flexbox en créant une démonstration complète des directions flex. Le laboratoire commence par la création d'un fichier HTML structuré présentant un conteneur flex et plusieurs éléments flex, offrant une base visuelle pour comprendre différentes techniques de mise en page. En mettant en œuvre une série de styles de direction flex, les apprenants acquièrent une expérience pratique dans la manipulation des dispositions d'éléments à l'aide de CSS Flexbox.

Le laboratoire guide systématiquement les participants à travers quatre configurations clés de direction flex : row (valeur par défaut), row-reverse, column et column-reverse. Chaque direction est explorée par la programmation pratique, permettant aux étudiants de comprendre comment flex-direction impacte le positionnement et l'écoulement des éléments dans un conteneur. Cette approche permet aux apprenants de développer une compréhension nuancée des principes de mise en page de boîte flexible et de leur application dans la conception web responsive.