Lernzettel: Maîtrise de Flexbox en CSS

📋 Plan du Cours

1. Introduction à Flexbox et usages
2. Terminologie conteneur, items et axes
3. flex-direction et orientation de l’axe principal
4. flex-wrap et gestion du retour à la ligne
5. justify-content et alignement sur l’axe principal
6. align-items, align-content et align-self
7. Propriétés flex des éléments et raccourci flex
8. order et modification de l’ordre visuel
9. Exemples pratiques de mise en page

📖 1. Introduction à Flexbox et usages

🔑 Notions clés & Définitions

• Flexbox : Module CSS de mise en page en une dimension qui organise des éléments dans un conteneur flexible.
• Barres de navigation : Mise en page typique où des liens s’alignent et se répartissent facilement sur l’axe principal.
• Galeries d’images : Disposition en lignes/colonnes d’images qui s’adapte aux tailles d’écran grâce aux règles flex.
• Cartes de contenu : Composants disposés en rangées ou colonnes pour créer une grille responsive avec Flexbox.

📝 Points essentiels

• Flexbox distribue l’espace entre les éléments du conteneur.
• Flexbox aligne les éléments plus facilement que des méthodes anciennes.
• Flexbox s’adapte à différentes tailles d’écran.
• Flexbox est présenté comme plus simple que float pour les layouts.
• Flexbox facilite l’alignement vertical.
• Flexbox permet de modifier l’ordre visuel sans changer le HTML.

💡 Astuce mémo

Flexbox = 1D pour aligner + répartir + adapter.

📖 2. Terminologie conteneur, items et axes

🔑 Notions clés & Définitions

• Conteneur flex : Parent CSS qui devient flexible quand on lui applique display: flex.
• Item flex : Enfant direct du conteneur flex, qui participe à la disposition en Flexbox.
• Axe principal : Direction de placement par défaut des items, déterminée par flex-direction.
• Axe secondaire : Axe perpendiculaire à l’axe principal, utilisé pour l’alignement transversal.

📝 Points essentiels

• Activer Flexbox se fait en appliquant display: flex sur le conteneur parent.
• Les éléments flex sont les enfants directs du conteneur.
• L’axe principal a une direction par défaut appelée row.
• L’axe secondaire est perpendiculaire à l’axe principal.
• La disposition dépend des propriétés définies sur le conteneur et sur les items.
• Les notions conteneur/items/axes servent de base à toutes les autres propriétés Flexbox.

💡 Astuce mémo

Parent = conteneur, enfants = items, lignes = axe principal, travers = axe secondaire.

📖 3. flex-direction et orientation de l’axe principal

🔑 Notions clés & Définitions

• flex-direction : Propriété qui définit la direction dans laquelle les items sont placés sur l’axe principal.
• row : Valeur par défaut de flex-direction qui place les items horizontalement dans l’ordre normal.
• row-reverse : Valeur de flex-direction qui inverse l’axe horizontal pour placer les items dans l’ordre opposé.
• column : Valeur de flex-direction qui place les items verticalement du haut vers le bas.
• column-reverse : Valeur de flex-direction qui place les items verticalement en inversant le sens (bas vers haut).

📝 Points essentiels

• Par défaut, flex-direction vaut row.
• row inverse l’axe horizontal par rapport à row-reverse.
• row-reverse place les items horizontalement mais dans le sens opposé.
• column place les items verticalement du haut vers le bas.
• column-reverse place les items verticalement du bas vers le haut.
• Le sens choisi détermine l’orientation de l’axe principal pour les autres propriétés.

💡 Astuce mémo

row = horizontal, column = vertical, reverse = sens inversé.

📖 4. flex-wrap et gestion du retour à la ligne

🔑 Notions clés & Définitions

• flex-wrap : Propriété qui contrôle le comportement quand les items ne tiennent pas sur une seule ligne.
• nowrap : Valeur de flex-wrap qui force tous les items à rester sur une seule ligne.
• wrap : Valeur de flex-wrap qui autorise le retour à la ligne pour les items débordants.
• wrap-reverse : Valeur de flex-wrap qui inverse l’ordre des lignes lors du retour à la ligne.
• flex-flow : Raccourci combinant flex-direction et flex-wrap en une seule déclaration.

📝 Points essentiels

• Le défaut présenté est flex-wrap: nowrap.
• Avec flex-wrap: wrap, les éléments passent à la ligne quand ils débordent.
• Avec flex-wrap: wrap-reverse, les lignes sont inversées (bas vers haut).
• flex-flow combine flex-direction et flex-wrap.
• Exemple donné: flex-flow: row wrap pour une disposition en lignes avec retour à la ligne.
• Le retour à la ligne change la structure en plusieurs lignes, ce qui impacte align-content.

💡 Astuce mémo

wrap = retour à la ligne, reverse = inversion des lignes, flow = direction + wrap.

📖 5. justify-content et alignement sur l’axe principal

🔑 Notions clés & Définitions

• justify-content : Propriété qui répartit les items le long de l’axe principal (distribution et positionnement).
• flex-start : Valeur de justify-content qui place les items au début de l’axe principal.
• flex-end : Valeur de justify-content qui place les items à la fin de l’axe principal.
• space-between : Valeur de justify-content qui met un espace entre chaque item en laissant les extrémités sans espace supplémentaire.
• space-around : Valeur de justify-content qui ajoute un espace autour de chaque item.

📝 Points essentiels

• justify-content: flex-start est indiqué comme valeur par défaut.
• justify-content: flex-end place les items à la fin de l’axe principal.
• justify-content: center centre les items sur l’axe principal.
• justify-content: space-between crée un espace entre les items.
• justify-content: space-around répartit l’espace autour des items.
• justify-content: space-evenly répartit l’espace de façon égale entre les items.

💡 Astuce mémo

justify-content = où vont les items sur l’axe principal : start/end/center/espaces.

📖 6. align-items, align-content et align-self

🔑 Notions clés & Définitions

• align-items : Propriété qui règle l’alignement des items sur l’axe secondaire pour tous les éléments du conteneur.
• align-content : Propriété qui règle l’alignement du groupe de lignes sur l’axe secondaire quand flex-wrap crée plusieurs lignes.
• align-self : Propriété qui permet de modifier l’alignement d’un item individuel par rapport à align-items.
• stretch : Valeur d’align-items qui étire les items et est donnée comme défaut.
• baseline : Valeur d’align-items qui aligne les items sur leur ligne de base.

📝 Points essentiels

• align-items: stretch est indiqué comme défaut.
• align-items: flex-start aligne les items au début sur l’axe secondaire.
• align-items: flex-end aligne les items à la fin sur l’axe secondaire.
• align-items: center centre les items sur l’axe secondaire.
• align-items: baseline aligne sur la ligne de base.
• align-self surcharge l’alignement défini par align-items pour un item précis.

💡 Astuce mémo

items = align-items, lignes = align-content, 1 élément = align-self.

📖 7. Propriétés flex des éléments et raccourci flex

🔑 Notions clés & Définitions

• flex-grow : Propriété qui définit la capacité d’un item à grandir pour occuper l’espace disponible.
• flex-shrink : Propriété qui définit la capacité d’un item à rétrécir quand l’espace manque.
• flex-basis : Propriété qui fixe la taille de base d’un item avant la répartition de l’espace.
• flex : Raccourci qui combine les comportements flex-grow, flex-shrink et flex-basis pour un item.

📝 Points essentiels

• flex-grow: 0 signifie que l’item ne grandit pas (valeur par défaut indiquée).
• flex-grow: 1 fait prendre à l’item l’espace disponible.
• flex-grow: 2 fait prendre à l’item deux fois plus d’espace que les autres avec la même base.
• flex-shrink: 1 est indiqué comme valeur par défaut (peut rétrécir).
• flex-shrink: 0 empêche l’item de rétrécir.
• flex-basis peut être auto, une valeur fixe (ex. 200 px) ou un pourcentage (ex. 50%).

💡 Astuce mémo

grow = grandir, shrink = rétrécir, basis = taille de départ.

📖 8. order et modification de l’ordre visuel

🔑 Notions clés & Définitions

• order : Propriété qui modifie l’ordre d’affichage des items dans le conteneur Flexbox.
• Ordre visuel : Ordre dans lequel les items apparaissent à l’écran après application de order.
• Valeur par défaut : Valeur d’order indiquée pour un item non modifié (ici 0).
• Accessibilité : Principe rappelé: l’ordre visuel ne remplace pas l’ordre HTML pour la lecture/structure.

📝 Points essentiels

• order: 0 est indiqué comme valeur par défaut.
• Un order plus grand fait apparaître l’item plus tard.
• Un order plus petit fait apparaître l’item plus tôt.
• L’exemple montre order:-1 avant order:0 et order:1.
• L’ordre visuel est modifié par order.
• L’ordre HTML n’est pas modifié, ce qui est présenté comme important pour l’accessibilité.

💡 Astuce mémo

order = tri visuel : plus petit = plus tôt, plus grand = plus tard.

📖 9. Exemples pratiques de mise en page

🔑 Notions clés & Définitions

• navbar : Classe d’exemple pour une barre de navigation utilisant Flexbox pour répartir les éléments.
• container : Classe d’exemple pour centrer des éléments avec Flexbox sur les deux axes.
• Grille responsive : Disposition qui s’adapte aux tailles d’écran, illustrée ici par l’usage de Flexbox.

📝 Points essentiels

• Exemple barre de navigation: display: flex, align-items: center, justify-content: space-between.
• La barre de navigation utilise align-items: center pour un alignement vertical centré.
• La barre de navigation utilise justify-content: space-between pour répartir les éléments.
• Exemple centrage parfait: display: flex, justify-content: center, align-items: center.
• Le centrage parfait utilise une hauteur indiquée comme 100 vh.
• Les exemples visent des mises en page modernes remplaçant les anciennes méthodes (float, table).

💡 Astuce mémo

Nav = space-between + center, Centre parfait = center + center.

📊 Tableaux de synthèse

flex-wrap : comportement au débordement

justify-content : types de répartition

⚠️ Pièges & confusions fréquents

1. Confondre axe principal et axe secondaire: justify-content agit sur l’axe principal, align-items sur l’axe secondaire.
2. Croire que flex-wrap: nowrap fait du retour à la ligne: c’est l’inverse.
3. Penser que order change l’ordre HTML: il ne modifie que l’ordre visuel.
4. Oublier que align-content ne sert que quand il y a plusieurs lignes (flex-wrap: wrap).
5. Confondre flex-grow et flex-shrink: grow agrandit, shrink rétrécit.
6. Croire que flex-basis est la taille finale: c’est la taille de base avant répartition de l’espace.

✅ Checklist Examen

1. Savoir activer Flexbox avec display: flex sur le conteneur parent.
2. Identifier conteneur, items, axe principal et axe secondaire dans un schéma.
3. Donner l’effet de flex-direction: row, row-reverse, column, column-reverse sur l’orientation.
4. Choisir flex-wrap: nowrap, wrap, wrap-reverse selon le comportement au débordement.
5. Associer chaque valeur de justify-content à sa distribution sur l’axe principal.
6. Différencier align-items, align-content et align-self et leurs valeurs (stretch, flex-start, flex-end, center, baseline).
7. Calculer/anticiper l’effet de flex-grow, flex-shrink et flex-basis à partir des valeurs données.
8. Utiliser order pour modifier l’ordre visuel et expliquer l’impact (ou non) sur l’HTML.
9. Reconnaître et interpréter des exemples: barre de navigation et centrage parfait avec les propriétés listées.
10. Réciter la règle d’or flex: 1 = prend tout l’espace disponible, telle qu’indiquée dans le cours.