Retour
Module 1 : Introduction à CSS
1.1 — Lier CSS à HTML Aperçu
🛠️ Projet 1 — Première mise en forme
Module 2 : Sélecteurs CSS
2.1 — Tous les types de sélecteurs Aperçu
🛠️ Projet 2 — Ciblage précis
Module 3 : Couleurs, fonds et dégradés
3.1 — Maîtriser les couleurs CSS Aperçu
🛠️ Projet 3 — Hero section
Module 4 : Typographie web
4.1 — Polices et texte Aperçu
🛠️ Projet 4 — Article typographié
Module 5 : Box Model — Le modèle de boîte
5.1 — Comprendre le Box Model Aperçu
🛠️ Projet 5 — Cartes produit
Module 6 : Display et positionnement
6.1 — Display : le comportement des boîtes Aperçu
🛠️ Projet 6 — Layout avec position
Module 7 : Flexbox — Layout flexible
7.1 — Flexbox fondamental Aperçu
🛠️ Projet 7 — Page centrée
Module 8 : Flexbox avancé
8.1 — Contrôler les enfants flex Aperçu
🛠️ Projet 8 — Layout 3 colonnes
Module 9 : CSS Grid — Layout en grille
9.1 — Grid fondamental Aperçu
🛠️ Projet 9 — Dashboard Grid
Module 10 : CSS Grid avancé
10.1 — Grid Areas et responsive Aperçu
🛠️ Projet 10 — Galerie auto-responsive
Module 11 : Responsive Design — Media Queries
11.1 — @media et breakpoints Aperçu
🛠️ Projet 11 — Site responsive
Module 12 : Mobile First — Approche pratique
12.1 — Techniques Mobile First Aperçu
🛠️ Projet 12 — Menu hamburger
Module 13 : Transitions et animations CSS
13.1 — Transitions et keyframes Aperçu
🛠️ Projet 13 — Page animée
Module 14 : Pseudo-classes et pseudo-éléments
14.1 — Pseudo-classes et pseudo-éléments Aperçu
🛠️ Projet 14 — Tableau stylé
Module 15 : Variables CSS et organisation
15.1 — CSS propre et scalable Aperçu
🛠️ Projet 15 — Design system
Module 16 : Projet final — Site responsive complet
16.1 — Site responsive professionnel Aperçu

Le reste de la formation est réservé aux inscrits.

S'inscrire gratuitement
Module 8 : Flexbox avancé Aperçu gratuit

8.1 — Contrôler les enfants flex

📋 Objectifs d'apprentissage

  • Utiliser flex: 1 pour distribuer l'espace
  • Maîtriser align-self (exception individuelle)
  • Changer l'ordre visuel avec order
  • Créer des layouts responsives sans media queries

La propriété raccourcie flex

.enfant { flex: 1; }        /* Prend 1 part de l'espace disponible */
.enfant { flex: 2; }        /* Prend 2 parts (2x plus large) */
.enfant { flex: 0 0 200px; }/* Largeur fixe de 200px */

align-self : l'exception

Alors que align-items affecte TOUS les enfants, align-self permet de faire une exception pour UN enfant. Parfait pour un élément centré parmi d'autres en haut.

order : réorganiser visuellement

.sidebar { order: -1; }  /* S'affiche en premier, même si dernier dans le HTML */
.main    { order: 0; }   /* Position normale */

⚠️ L'ordre visuel change mais le HTML reste le même. Important pour l'accessibilité (ordre de tabulation).

💡 Layout Saint-Graal en Flexbox

.container { display: flex; } .sidebar { flex: 0 0 250px; } .main { flex: 1; } .aside { flex: 0 0 200px; }

Sidebar 250px fixe à gauche, contenu flexible au centre, aside 200px à droite. Adaptatif, sans media query.

Ceci est un aperçu gratuit.
Voir la formation complète