Explorer la propriété order de Flexbox en CSS

Introduction

Dans ce laboratoire, nous allons explorer la propriété order de Flexbox en CSS, en mettant l'accent sur la compréhension de la manière dont elle peut modifier dynamiquement l'agencement visuel des éléments flexibles sans modifier la structure HTML. En adoptant une approche étape par étape, les participants apprendront à créer une mise en page flexible, à appliquer des valeurs d'ordre à des éléments individuels et à observer comment ces valeurs influencent le rendu des éléments.

Le laboratoire commence par la configuration d'une structure HTML de base avec un conteneur et plusieurs éléments flexibles, puis ajoute progressivement des styles CSS pour transformer la mise en page. Les participants expérimenteront avec différentes valeurs de la propriété order, en acquérant des connaissances sur le mécanisme de tri qui permet de contrôler précisément le positionnement des éléments dans un conteneur flexible, améliorant finalement leur compréhension des techniques de conception web flexible.

Configurer la structure HTML pour la mise en page Flexbox

Dans cette étape, vous allez apprendre à créer une structure HTML de base qui servira de base pour explorer la propriété order de Flexbox. Nous allons configurer un conteneur simple avec plusieurs éléments flexibles pour démontrer comment fonctionne la propriété order.

Tout d'abord, ouvrez le WebIDE et créez un fichier HTML dans le répertoire ~/project :

Cliquez sur "Fichier" > "Nouveau fichier"
Enregistrez le fichier sous le nom flexbox-order.html

Maintenant, créons la structure HTML :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Démonstration de la propriété order de Flexbox</title>
    <style>
      /* Les styles CSS seront ajoutés dans l'étape suivante */
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">Item 1</div>
      <div class="item item2">Item 2</div>
      <div class="item item3">Item 3</div>
      <div class="item item4">Item 4</div>
      <div class="item item5">Item 5</div>
    </div>
  </body>
</html>

Analysons la structure HTML :

Nous avons créé un conteneur <div> avec la classe container
À l'intérieur du conteneur, nous avons cinq éléments <div> avec les classes item et des classes individuelles item1 à item5
Cette structure nous aidera à démontrer comment la propriété order affecte la disposition des éléments flexibles

Sortie exemple lorsque vous ouvrez ce fichier HTML dans un navigateur :

[Mise en page par défaut affichant 5 éléments dans leur ordre original]
Item 1 | Item 2 | Item 3 | Item 4 | Item 5

Créer un style CSS de base pour le conteneur flex

Dans cette étape, vous allez apprendre à appliquer un style CSS de base pour créer un conteneur flex et styler ses éléments. Ouvrez le fichier flexbox-order.html que vous avez créé dans l'étape précédente et modifiez la section <style>.

Ajoutez le CSS suivant à l'intérieur de la balise <style> de votre fichier HTML :

.container {
  display: flex;
  width: 100%;
  background-color: #f0f0f0;
  padding: 20px;
  gap: 10px; /* Crée de l'espace entre les éléments flex */
}

.item {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Arial, sans-serif;
}

Analysons les propriétés CSS :

display: flex; transforme le conteneur en conteneur flex
gap: 10px; ajoute de l'espace entre les éléments flex
Les styles .item définissent l'apparence de chaque élément flex
justify-content: center; et align-items: center; centrent le texte à l'intérieur de chaque élément

Sortie exemple lorsque vous ouvrez le fichier HTML dans un navigateur :

[Une rangée de 5 carrés bleus avec du texte blanc centré, espacés régulièrement]
Item 1 | Item 2 | Item 3 | Item 4 | Item 5

Les points clés à comprendre :

Le conteneur flex utilise display: flex pour activer la mise en page Flexbox
Les éléments sont disposés horizontalement par défaut
Chaque élément a une largeur et une hauteur fixes pour une visualisation claire

Appliquer la propriété order aux éléments flex

Dans cette étape, vous allez apprendre à utiliser la propriété order pour modifier l'ordre visuel des éléments flex sans modifier la structure HTML. Mettez à jour le CSS dans votre fichier flexbox-order.html en ajoutant des propriétés order à des éléments spécifiques :

.container {
  display: flex;
  width: 100%;
  background-color: #f0f0f0;
  padding: 20px;
  gap: 10px;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Arial, sans-serif;
}

/* Ajoutez les propriétés order */
.item1 {
  order: 3;
}
.item2 {
  order: 5;
}
.item3 {
  order: 1;
}
.item4 {
  order: 4;
}
.item5 {
  order: 2;
}

Points clés concernant la propriété order :

La valeur d'ordre par défaut est 0 pour tous les éléments flex
Les valeurs d'ordre inférieures sont affichées en premier
Les éléments peuvent être réordonnés sans modifier la structure HTML
Les valeurs d'ordre négatives sont autorisées

Sortie exemple lorsque vous ouvrez le fichier HTML dans un navigateur :

[Les éléments seront désormais affichés dans cet ordre]
Item 3 | Item 5 | Item 1 | Item 4 | Item 2

L'ordre des éléments est désormais complètement différent de la structure HTML d'origine, démontrant le pouvoir de la propriété order.

Expérimenter avec différentes valeurs d'ordre

Dans cette étape, vous allez explorer la manière dont différentes valeurs d'ordre peuvent modifier considérablement la disposition des éléments flex. Mettez à jour le CSS dans votre fichier flexbox-order.html pour expérimenter diverses configurations d'ordre :

.container {
  display: flex;
  width: 100%;
  background-color: #f0f0f0;
  padding: 20px;
  gap: 10px;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Arial, sans-serif;
}

/* Expérimentez avec différentes valeurs d'ordre */
.item1 {
  order: -2;
  background-color: #e74c3c;
}
.item2 {
  order: 10;
  background-color: #2ecc71;
}
.item3 {
  order: 0;
  background-color: #f39c12;
}
.item4 {
  order: 5;
  background-color: #3498db;
}
.item5 {
  order: -1;
  background-color: #9b59b6;
}

Observations clés :

Les valeurs d'ordre négatives sont autorisées et peuvent déplacer les éléments au début
Les éléments avec des valeurs d'ordre inférieures apparaissent en premier
Les éléments avec la même valeur d'ordre conservent leur ordre HTML d'origine
Les valeurs d'ordre peuvent être tout entier (positif ou négatif)

Sortie exemple lorsque vous ouvrez le fichier HTML dans un navigateur :

[Les éléments seront affichés dans cet ordre]
Item 1 (rouge)  | Item 5 (violet) | Item 3 (orange) | Item 4 (bleu) | Item 2 (vert)

Cet exemple démontre la flexibilité de la propriété order dans le réarrangement des éléments flex.

Comprendre le mécanisme de tri de la propriété order

Dans cette étape, vous approfondirez la compréhension de la manière dont la propriété order trie les éléments flex. Mettez à jour votre fichier flexbox-order.html avec le CSS suivant pour explorer le mécanisme de tri :

.container {
  display: flex;
  width: 100%;
  background-color: #f0f0f0;
  padding: 20px;
  gap: 10px;
  flex-wrap: wrap; /* Autorise les éléments à s'enrouler pour une meilleure visualisation */
}

.item {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Arial, sans-serif;
  margin: 5px;
}

/* Démontre le mécanisme de tri */
.item1 {
  order: 3;
  background-color: #e74c3c;
}
.item2 {
  order: 3;
  background-color: #2ecc71;
}
.item3 {
  order: 1;
  background-color: #f39c12;
}
.item4 {
  order: 2;
  background-color: #3498db;
}
.item5 {
  order: 1;
  background-color: #9b59b6;
}

Principales idées sur le mécanisme de tri :

Les éléments avec des valeurs d'ordre inférieures sont affichés en premier
Lorsque plusieurs éléments ont la même valeur d'ordre, ils conservent leur ordre dans le document HTML d'origine
La valeur d'ordre par défaut est 0 pour les éléments sans ordre explicite

Sortie exemple lorsque vous ouvrez le fichier HTML dans un navigateur :

[Les éléments seront affichés dans cet ordre]
Item 3 (orange) | Item 5 (violet) | Item 4 (bleu) | Item 1 (rouge) | Item 2 (vert)

Observez comment :

Les éléments avec order: 1 (Item 3 et Item 5) apparaissent en premier
Entre les éléments avec order: 1, Item 3 vient avant Item 5 en raison de l'ordre HTML d'origine
Les éléments avec order: 3 (Item 1 et Item 2) apparaissent en dernier
Dans l'ordre 3, Item 1 vient avant Item 2

Résumé

Dans ce laboratoire, les participants explorent la propriété order de Flexbox en créant une mise en page HTML structurée et en appliquant un style CSS pour comprendre comment les éléments flex peuvent être réordonnés dynamiquement. Le laboratoire commence par la configuration d'une structure HTML de base présentant un conteneur avec cinq éléments flex, démontrant les éléments de base nécessaires pour implémenter les techniques de mise en page Flexbox.

Au fil d'étapes progressives, les apprenants appliqueront les propriétés d'affichage CSS pour créer un conteneur flex, styler les éléments individuels et expérimenter avec la propriété order pour manipuler l'agencement visuel des éléments. En appliquant différentes valeurs d'ordre, les participants acquerront des connaissances pratiques sur la manière dont Flexbox permet des mises en page de conception flexible et réactive sans modifier la structure HTML d'origine.