Explorer la propriété align-items dans Flexbox

Introduction

Dans ce laboratoire, vous allez explorer la propriété align-items dans Flexbox, une technique de mise en page CSS puissante pour contrôler l'alignement vertical des éléments flexibles à l'intérieur d'un conteneur. Par une série d'exercices pratiques, vous allez apprendre à manipuler les éléments flexibles en utilisant différentes valeurs d'alignement telles que stretch, flex-start, flex-end, center et baseline.

Le laboratoire vous guidera dans la création de structures HTML, l'application de diverses stratégies d'alignement et la compréhension de la manière dont la propriété align-items impacte la mise en page des conteneurs flexibles. En expérimentant des exemples pratiques, vous obtiendrez des informations sur la manière de contrôler efficacement le positionnement et la dimensionnement des éléments dans les designs web réactifs.

Comprendre les bases de l'attribut align-items

Dans cette étape, vous allez apprendre les concepts fondamentaux de la propriété align-items dans Flexbox, qui est cruciale pour contrôler l'alignement vertical des éléments flexibles à l'intérieur d'un conteneur flexible.

La propriété align-items définit comment les éléments flexibles sont alignés le long de l'axe transversal (verticalement dans une disposition en ligne, horizontalement dans une disposition en colonne). Par défaut, les éléments flexibles sont étirés pour remplir l'axe transversal du conteneur.

Créons un exemple HTML et CSS simple pour démontrer l'utilisation de base de align-items:

<!doctype html>
<html>
  <head>
    <style>
      .flex-container {
        display: flex;
        height: 200px;
        border: 2px solid blue;
      }
      .flex-item {
        width: 100px;
        background-color: lightgreen;
        margin: 5px;
      }
    </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>
  </body>
</html>

Dans cet exemple, nous avons créé un conteneur flexible avec trois éléments flexibles. Par défaut, la propriété align-items est définie sur stretch, ce qui signifie que les éléments seront étirés pour remplir la hauteur du conteneur.

Les principales valeurs de align-items sont:

stretch (par défaut) : Les éléments sont étirés pour remplir le conteneur
flex-start : Les éléments sont alignés au début de l'axe transversal
flex-end : Les éléments sont alignés à la fin de l'axe transversal
center : Les éléments sont centrés le long de l'axe transversal
baseline : Les éléments sont alignés sur la base de leur texte

Sortie d'exemple de l'alignement stretch par défaut :

[Item 1][Item 2][Item 3]
 ------  ------  ------
 (full   (full   (full
  height) height) height)

Ouvrez l'IDE Web et créez un nouveau fichier nommé flexbox-align.html dans le répertoire ~/project. Copiez le code HTML ci-dessus dans ce fichier et enregistrez-le. Vous pouvez ensuite ouvrir le fichier dans un navigateur web pour voir l'alignement par défaut en action.

Créer une structure HTML pour une mise en page Flexbox

Dans cette étape, vous allez apprendre à créer une structure HTML de base qui configure une mise en page Flexbox. Nous allons construire sur l'étape précédente en créant un document HTML plus structuré avec plusieurs éléments flexibles.

Ouvrez l'IDE Web et créez un nouveau fichier nommé flexbox-layout.html dans le répertoire ~/project. Utilisez la structure HTML suivante pour démontrer une mise en page Flexbox typique :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Flexbox Layout Example</title>
    <style>
      .flex-container {
        display: flex;
        background-color: #f0f0f0;
        padding: 20px;
        border: 2px solid #333;
      }
      .flex-item {
        width: 100px;
        height: 100px;
        margin: 10px;
        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 class="flex-item">Item 5</div>
    </div>
  </body>
</html>

Analysons les composants clés de cette mise en page Flexbox :

La classe .flex-container a display: flex, ce qui active la mise en page Flexbox
Nous avons ajouté 5 éléments flexibles avec un style cohérent
Le conteneur a un fond gris clair et un padding
Chaque élément a une largeur et une hauteur fixes, avec un fond vert

La sortie d'exemple ressemblera à ceci :

[Item 1][Item 2][Item 3][Item 4][Item 5]
   ↑       ↑       ↑       ↑       ↑
  Green   Green   Green   Green   Green
  boxes   boxes   boxes   boxes   boxes

Enregistrez le fichier et ouvrez-le dans un navigateur web pour voir la mise en page Flexbox en action. Remarquez comment les éléments se distribuent automatiquement horizontalement avec un espacement égal.

Appliquer l'alignement de type "étirement" aux éléments flexibles

Dans cette étape, vous allez explorer l'alignement de type "étirement" (stretch) par défaut dans Flexbox et comprendre comment il dimensionne automatiquement les éléments flexibles le long de l'axe transversal.

Ouvrez le fichier flexbox-layout.html que vous avez créé dans l'étape précédente. Nous allons modifier la feuille de style CSS pour démontrer plus clairement l'alignement de type "étirement" :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Stretch Alignment in Flexbox</title>
    <style>
      .flex-container {
        display: flex;
        height: 300px; /* Hauteur fixe du conteneur */
        background-color: #f0f0f0;
        padding: 20px;
        border: 2px solid #333;
      }
      .flex-item {
        width: 100px;
        margin: 10px;
        background-color: #4caf50;
        color: white;
        text-align: center;
        /* Aucune hauteur explicite définie */
      }
    </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 class="flex-item">Item 5</div>
    </div>
  </body>
</html>

Points clés concernant l'alignement de type "étirement" :

Par défaut, align-items: stretch est appliqué aux conteneurs flexibles
Les éléments flexibles seront automatiquement étirés pour remplir la hauteur du conteneur
Cela se produit lorsque aucune hauteur explicite n'est définie pour les éléments
L'étirement se produit le long de l'axe transversal (verticalement dans une disposition en ligne)

Visualisation de la sortie d'exemple :

[Item 1][Item 2][Item 3][Item 4][Item 5]
   ↑       ↑       ↑       ↑       ↑
 Étiré     Étiré     Étiré     Étiré     Étiré
 jusqu'à   jusqu'à   jusqu'à   jusqu'à   jusqu'à
 la hauteur totale la hauteur totale la hauteur totale la hauteur totale la hauteur totale

Remarquez comment les éléments s'étendent automatiquement pour remplir la hauteur de 300px du conteneur flexible, même si aucune hauteur individuelle n'a été spécifiée pour les éléments. Il s'agit du comportement par défaut de type "étirement" de Flexbox.

Enregistrez le fichier et ouvrez-le dans un navigateur web pour voir l'alignement de type "étirement" en action. Chaque élément aura la hauteur totale du conteneur, créant une apparence uniforme et étirée.

Expérimenter avec différentes valeurs de align-items

Dans cette étape, vous allez explorer les différentes valeurs de align-items et voir comment elles affectent l'alignement vertical des éléments flexibles à l'intérieur d'un conteneur.

Ouvrez le fichier flexbox-layout.html et mettez à jour la feuille de style CSS pour démontrer diverses valeurs de align-items :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Align-Items Experiment</title>
    <style>
      .flex-container {
        display: flex;
        height: 300px;
        background-color: #f0f0f0;
        border: 2px solid #333;
        margin-bottom: 20px;
      }
      .flex-item {
        width: 100px;
        margin: 10px;
        background-color: #4caf50;
        color: white;
        text-align: center;
        line-height: 50px;
      }

      /* Différentes classes pour align-items */
      .stretch {
        align-items: stretch;
      }
      .flex-start {
        align-items: flex-start;
      }
      .flex-end {
        align-items: flex-end;
      }
      .center {
        align-items: center;
      }
      .baseline {
        align-items: baseline;
      }
    </style>
  </head>
  <body>
    <div class="flex-container stretch">
      <div class="flex-item">Item 1</div>
      <div class="flex-item">Item 2</div>
      <div class="flex-item">Item 3</div>
    </div>
    <div class="flex-container flex-start">
      <div class="flex-item">Item 1</div>
      <div class="flex-item">Item 2</div>
      <div class="flex-item">Item 3</div>
    </div>
    <div class="flex-container flex-end">
      <div class="flex-item">Item 1</div>
      <div class="flex-item">Item 2</div>
      <div class="flex-item">Item 3</div>
    </div>
    <div class="flex-container center">
      <div class="flex-item">Item 1</div>
      <div class="flex-item">Item 2</div>
      <div class="flex-item">Item 3</div>
    </div>
    <div class="flex-container baseline">
      <div class="flex-item" style="font-size: 16px;">Item 1</div>
      <div class="flex-item" style="font-size: 24px;">Item 2</div>
      <div class="flex-item" style="font-size: 32px;">Item 3</div>
    </div>
  </body>
</html>

Valeurs clés de align-items expliquées :

stretch (par défaut) : Les éléments sont étirés pour remplir la hauteur du conteneur
flex-start : Les éléments sont alignés au sommet du conteneur
flex-end : Les éléments sont alignés au bas du conteneur
center : Les éléments sont centrés verticalement
baseline : Les éléments sont alignés sur la base de leur texte

Visualisation de la sortie d'exemple :

Stretch:    [Item 1][Item 2][Item 3] (hauteur totale)
Flex-Start: [Item 1][Item 2][Item 3] (aligné en haut)
Flex-End:   [Item 1][Item 2][Item 3] (aligné en bas)
Center:     [Item 1][Item 2][Item 3] (centré verticalement)
Baseline:   [Item 1][Item 2][Item 3] (aligné sur la base du texte)

Enregistrez le fichier et ouvrez-le dans un navigateur web pour voir les différents styles d'alignement. Remarquez comment chaque conteneur démontre un alignement vertical unique des éléments flexibles.

Personnaliser l'alignement du conteneur flexible

Dans cette étape, vous allez apprendre à créer une mise en page Flexbox plus complexe en combinant différentes techniques d'alignement et en ajoutant une personnalisation des éléments individuels.

Ouvrez le fichier flexbox-layout.html et mettez à jour le code avec l'exemple avancé suivant :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Advanced Flexbox Alignment</title>
    <style>
      .flex-container {
        display: flex;
        height: 300px;
        background-color: #f0f0f0;
        border: 2px solid #333;
        margin-bottom: 20px;
        padding: 10px;
      }
      .flex-item {
        width: 100px;
        margin: 10px;
        background-color: #4caf50;
        color: white;
        text-align: center;
        line-height: 50px;
      }

      /* Scénarios d'alignement personnalisés */
      .mixed-alignment {
        align-items: center;
      }
      .mixed-alignment.special-item {
        align-self: flex-end;
      }
      .mixed-alignment.tall-item {
        align-self: stretch;
        height: auto;
      }
    </style>
  </head>
  <body>
    <div class="flex-container mixed-alignment">
      <div class="flex-item">Normal</div>
      <div class="flex-item special-item">Special</div>
      <div class="flex-item tall-item">Tall Item</div>
    </div>
  </body>
</html>

Techniques de personnalisation clés :

align-items: center définit le centrage vertical par défaut
align-self: flex-end annule l'alignement du conteneur pour des éléments spécifiques
align-self: stretch permet à un élément individuel de s'étirer différemment

Visualisation de la sortie d'exemple :

[Normal Item]  [Special Item]  [Tall Item]
    ↑             ↓              ↑
  Centré    Aligné en bas   Étiré

L'exemple montre comment vous pouvez :

Définir un alignement par défaut pour tous les éléments
Annuler l'alignement pour des éléments spécifiques
Créer des mises en page plus dynamiques et flexibles

Enregistrez le fichier et ouvrez-le dans un navigateur web pour voir l'alignement personnalisé en action.

Sommaire

Dans ce laboratoire, les participants explorent la propriété align-items dans Flexbox, apprenant à contrôler l'alignement vertical des éléments flexibles à l'intérieur d'un conteneur. Le laboratoire offre une introduction complète aux différentes stratégies d'alignement, en commençant par le comportement par défaut de type "étirement" (stretch) et en démontrant comment les éléments flexibles peuvent être positionnés en utilisant des valeurs telles que flex-start, flex-end, center et baseline.

Grâce à des exemples pratiques d'HTML et de CSS, les apprenants acquièrent une expérience pratique dans la manipulation des mises en page de conteneurs flexibles, comprenant comment la propriété align-items impacte le positionnement des éléments le long de l'axe transversal. Le laboratoire souligne l'importance de cette propriété dans la création de designs web réactifs et visuellement équilibrés, permettant aux participants de développer des techniques de mise en page plus sophistiquées et flexibles.