From f89a9cf6648b0134ad367abca0f86614b46b0f22 Mon Sep 17 00:00:00 2001 From: HAMA-442 Date: Sun, 1 Jun 2025 17:57:09 +0100 Subject: [PATCH 1/4] Update flexbox.html --- 2-copy-of-code/lesson-16/flexbox.html | 161 +++++++++++--------------- 1 file changed, 69 insertions(+), 92 deletions(-) diff --git a/2-copy-of-code/lesson-16/flexbox.html b/2-copy-of-code/lesson-16/flexbox.html index cf6fb1f..dd2b374 100644 --- a/2-copy-of-code/lesson-16/flexbox.html +++ b/2-copy-of-code/lesson-16/flexbox.html @@ -1,125 +1,102 @@ - Flexbox Practice + Flexbox Advanced Practice + - -
-
div 1 text
-
div 2

text

+ + + +
1. Flex de base
+
+
+ Div 1 (flex: 1) - Passez la souris +
+
+ Div 2

avec paragraphe

+
-
-
100px
-
flex: 1
+ +
2. Flex avec largeur fixe
+
+
+ 150px (fixe) +
+
+ flex: 1 (prend l'espace restant) +
-
-
flex: 1
-
100px
-
flex: 2
+ +
3. Flex avec ratios
+
+
+ flex: 1 (1 part) +
+
+ 120px (fixe) +
+
+ flex: 3 (3 parts) +
+ +
4. Centrage (justify-content: center)
-
100px
-
100px
-
100px
+
100px
+
100px
+
100px
+ +
5. Espacement égal (space-between)
-
100px
-
100px
-
100px
+
100px
+
100px
+
100px
+ +
6. Alignement vertical (align-items)
-
100px
-
100px
-
100px
+
Hauteur: 60px
+
Hauteur: 40px
+
Hauteur: 80px
+ From fb51594d976d7797254d27422dc3b6ac2caaf937 Mon Sep 17 00:00:00 2001 From: HAMA-442 Date: Sun, 1 Jun 2025 17:57:45 +0100 Subject: [PATCH 2/4] Update flexbox.html MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Principales améliorations : Ajout de titres pour chaque section Effet hover sur le premier élément Style global pour éviter la répétition Arrière-plan plus clair pour mieux voir les éléments Bordures et espacement améliorés Hauteurs variables dans la dernière section pour mieux voir l'alignement Commentaires pour organiser le code From 6069525c17613db508dd101e70190e6e6f17ee36 Mon Sep 17 00:00:00 2001 From: HAMA-442 Date: Sun, 1 Jun 2025 17:58:35 +0100 Subject: [PATCH 3/4] Update flexbox.html MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Principales améliorations : Ajout de titres pour chaque section Effet hover sur le premier élément Style global pour éviter la répétition Arrière-plan plus clair pour mieux voir les éléments Bordures et espacement améliorés Hauteurs variables dans la dernière section pour mieux voir l'alignement Commentaires pour organiser le code From 65accd9b821cc9ddac4a812c55e1c9e9aec83534 Mon Sep 17 00:00:00 2001 From: HAMA-442 Date: Sun, 1 Jun 2025 18:20:18 +0100 Subject: [PATCH 4/4] mise a jour flexbox.html --- 2-copy-of-code/lesson-16/flexbox.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/2-copy-of-code/lesson-16/flexbox.html b/2-copy-of-code/lesson-16/flexbox.html index dd2b374..4eef7b0 100644 --- a/2-copy-of-code/lesson-16/flexbox.html +++ b/2-copy-of-code/lesson-16/flexbox.html @@ -3,12 +3,12 @@ Flexbox Advanced Practice