Introduction
Dans ce laboratoire, les participants exploreront la propriété flex-grow dans CSS Flexbox, une technique de mise en page puissante pour créer des designs web réactifs et flexibles. En adoptant une approche étape par étape, les apprentissants créeront un fichier HTML, configureront un conteneur flexbox et expérimenteront avec différentes valeurs de flex-grow pour comprendre comment les éléments se développent dynamiquement et distribuent l'espace disponible.
Le laboratoire guide les étudiants dans la création d'une structure HTML de base, la définition d'un conteneur flexbox et l'application des propriétés flex-grow aux éléments enfants. En définissant des valeurs numériques et en observant comment les boîtes croissent proportionnellement, les participants acquerront des connaissances pratiques sur la commande de la flexibilité de la mise en page et sur la compréhension du comportement nuancé de flex-grow dans la conception web.
Créer un fichier HTML et configurer la structure de base
Dans cette étape, vous créerez le fichier HTML de base pour explorer la propriété flex-grow dans CSS Flexbox. Nous allons configurer une structure HTML de base et préparer l'environnement pour notre démonstration de flexbox.
Tout d'abord, accédez au répertoire du projet et créez un fichier HTML :
cd ~/projet
touch index.html
Maintenant, ouvrez le fichier index.html dans le WebIDE et ajoutez la structure HTML suivante :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Démonstration de flex-grow avec Flexbox</title>
<style>
/* Les styles CSS seront ajoutés dans les étapes suivantes */
</style>
</head>
<body>
<div class="container">
<div class="box box1">Boîte 1</div>
<div class="box box2">Boîte 2</div>
<div class="box box3">Boîte 3</div>
</div>
</body>
</html>
Cette structure HTML de base comprend :
- Un conteneur
<div>qui deviendra notre conteneur flexbox - Trois éléments enfants
<div>représentant les boîtes que nous utiliserons pour démontrer flex-grow - Une section
<style>de remplacement où nous ajouterons le CSS dans les étapes suivantes
Sortie exemple lors de la visualisation du fichier :
[Fichier HTML créé avec la structure de base et trois boîtes div]
Le fichier est maintenant prêt pour une exploration plus approfondie de CSS Flexbox dans les étapes suivantes.
Définir un conteneur Flexbox avec la propriété flex-grow
Dans cette étape, vous allez apprendre à définir un conteneur Flexbox et à comprendre le concept de base de la propriété flex-grow. Ouvrez le fichier index.html dans le WebIDE et modifiez la section <style> pour créer un conteneur Flexbox.
Ajoutez le CSS suivant pour définir le conteneur Flexbox :
<style>
.container {
display: flex;
border: 2px solid #333;
width: 100%;
height: 200px;
}
.box {
background-color: #4caf50;
color: white;
padding: 20px;
margin: 10px;
text-align: center;
}
</style>
Analysons le CSS :
display: flex;transforme le conteneur en conteneur Flexwidth: 100%;fait en sorte que le conteneur occupe toute la largeur- Les styles
.boxdéfinissent l'apparence des éléments Flex individuels
Sortie exemple lorsqu'elle est affichée dans un navigateur :
[Trois boîtes vertes affichées en ligne horizontale, remplissant le conteneur]
La propriété flex-grow détermine la manière dont les éléments Flex croissent les uns par rapport aux autres lorsqu'il y a de l'espace supplémentaire disponible. Par défaut, flex-grow est défini sur 0, ce qui signifie que les éléments ne croîtront pas au-delà de leur taille initiale.
Pour voir le comportement par défaut, ouvrez le fichier HTML dans un navigateur web. Vous remarquerez que les boîtes conservent leur taille initiale et ne s'étendent pas pour remplir le conteneur.
Explorer les valeurs initiales et héritées de flex-grow
Dans cette étape, vous allez étudier les comportements par défaut et hérité de la propriété flex-grow. Ouvrez votre fichier index.html et mettez à jour la section <style> pour explorer ces concepts.
Commençons par comprendre la valeur initiale de flex-grow :
<style>
.container {
display: flex;
border: 2px solid #333;
width: 100%;
height: 200px;
}
.box {
background-color: #4caf50;
color: white;
padding: 20px;
margin: 10px;
text-align: center;
/* La valeur initiale de flex-grow est 0 par défaut */
/* flex-grow: 0; */
}
.box1 {
/* Définition explicite de la valeur initiale */
flex-grow: 0;
}
.box2 {
/* Exemple d'héritage */
flex-grow: inherit;
}
.box3 {
/* Une autre manière de montrer l'état initial */
flex-grow: initial;
}
</style>
Observations clés :
flex-grow: 0;est la valeur par défaut, ce qui signifie que les éléments ne croîtront pasinheritprend la valeur deflex-growdu conteneur parentinitialremet la propriété à sa valeur par défaut (0)
Sortie exemple lorsqu'elle est affichée dans un navigateur :
[Trois boîtes vertes de largeur égale, ne s'étendant pas pour remplir le conteneur]
Pour illustrer cela plus en détail, vous pouvez modifier le HTML pour montrer comment ces valeurs fonctionnent :
<body>
<div class="container">
<div class="box box1">Boîte 1 (flex-grow: 0)</div>
<div class="box box2">Boîte 2 (flex-grow: inherit)</div>
<div class="box box3">Boîte 3 (flex-grow: initial)</div>
</div>
</body>
Cet exemple montre que, par défaut, les éléments Flex conservent leur taille initiale et ne croissent pas pour remplir l'espace supplémentaire dans le conteneur.
Attribuer des valeurs numériques de flex-grow à différents éléments
Dans cette étape, vous allez apprendre à utiliser des valeurs numériques avec flex-grow pour contrôler la manière dont les éléments Flex se développent dans un conteneur. Ouvrez votre fichier index.html et mettez à jour la section <style> pour explorer différentes valeurs numériques de flex-grow.
Mettez à jour votre CSS avec les styles suivants :
<style>
.container {
display: flex;
border: 2px solid #333;
width: 100%;
height: 200px;
}
.box {
background-color: #4caf50;
color: white;
padding: 20px;
margin: 10px;
text-align: center;
}
.box1 {
/* La boîte 1 croîtra de 1 unité */
flex-grow: 1;
}
.box2 {
/* La boîte 2 croîtra de 2 unités */
flex-grow: 2;
}
.box3 {
/* La boîte 3 croîtra de 3 unités */
flex-grow: 3;
}
</style>
Mettez à jour le HTML pour correspondre aux nouveaux styles :
<body>
<div class="container">
<div class="box box1">Boîte 1 (flex-grow: 1)</div>
<div class="box box2">Boîte 2 (flex-grow: 2)</div>
<div class="box box3">Boîte 3 (flex-grow: 3)</div>
</div>
</body>
Observations clés :
- Les valeurs de
flex-growdéterminent la distribution de l'espace supplémentaire - Des valeurs plus élevées signifient une croissance plus importante par rapport aux autres éléments
- L'espace disponible total est divisé proportionnellement
Sortie exemple lorsqu'elle est affichée dans un navigateur :
[Trois boîtes vertes avec des largeurs différentes :
- Boîte 1 est la plus étroite (1 unité)
- Boîte 2 est plus large (2 unités)
- Boîte 3 est la plus large (3 unités)]
Les boîtes vont maintenant se développer différemment en fonction de leurs valeurs de flex-grow, démontrant la manière dont vous pouvez contrôler la dimensionnement des éléments dans un conteneur Flex.
Expérimenter avec les proportions de flex-grow
Dans cette étape, vous allez explorer des proportions de flex-grow plus complexes et comprendre comment différentes valeurs interagissent dans un conteneur Flex. Mettez à jour votre fichier index.html avec le code suivant :
<style>
.container {
display: flex;
border: 2px solid #333;
width: 100%;
height: 200px;
background-color: #f0f0f0;
}
.box {
color: white;
padding: 20px;
margin: 10px;
text-align: center;
}
.box1 {
background-color: #3498db;
flex-grow: 1;
}
.box2 {
background-color: #e74c3c;
flex-grow: 2;
}
.box3 {
background-color: #2ecc71;
flex-grow: 1;
}
.box4 {
background-color: #f39c12;
flex-grow: 4;
}
</style>
<body>
<div class="container">
<div class="box box1">Boîte 1 (flex-grow: 1)</div>
<div class="box box2">Boîte 2 (flex-grow: 2)</div>
<div class="box box3">Boîte 3 (flex-grow: 1)</div>
<div class="box box4">Boîte 4 (flex-grow: 4)</div>
</div>
</body>
Concepts clés à comprendre :
- Valeurs totales de flex-grow : 1 + 2 + 1 + 4 = 8
- La boîte 1 et la boîte 3 obtiennent chacun 1/8 de l'espace supplémentaire
- La boîte 2 obtient 2/8 de l'espace supplémentaire
- La boîte 4 obtient 4/8 (la moitié) de l'espace supplémentaire
Sortie exemple lorsqu'elle est affichée dans un navigateur :
[Quatre boîtes colorées avec des largeurs différentes :
- Boîte 1 et Boîte 3 : Étroites (1/8 chacune)
- Boîte 2 : Un peu plus large (2/8)
- Boîte 4 : La plus large (4/8 ou la moitié du conteneur)]
Cet exemple démontre comment les valeurs de flex-grow créent un dimensionnement proportionnel, permettant un contrôle fin des expansions d'éléments.
Résumé
Dans ce laboratoire, les participants explorent la propriété flex-grow dans CSS Flexbox en créant un fichier HTML structuré et en mettant en œuvre un conteneur flexible avec plusieurs éléments div. Le laboratoire commence par la configuration d'une structure HTML de base avec un conteneur et trois boîtes enfant, démontrant l'installation de base pour les expériences Flexbox.
Grâce à un style CSS progressif, les apprenants découvrent comment transformer un conteneur standard en une mise en page Flexbox, en appliquant la propriété flex-grow pour comprendre comment les éléments se développent dynamiquement et distribuent l'espace disponible. L'approche pratique permet aux participants d'expérimenter avec différentes valeurs de flex-grow, en observant comment les proportions numériques influencent le dimensionnement et la distribution des éléments du conteneur Flex.
