Maison Flex : apprendre CSS flexbox en jouant

Décore la maison. Maîtrise flexbox.

Six pièces à décorer, du salon au grenier. Tu écris du vrai CSS dans le carnet du designer, et les cadres, assiettes, post-it et jardinières glissent en direct vers les gabarits en papier kraft scotchés au mur. Quand tout tombe pile, le tampon claque : Parfait !

▶ Jouer L'utiliser avec ma classe

🏠 6 pièces ⭐ 41 niveaux 🎨 14 outils ⏱️ ~3 h 🌐 FR / EN

.mur { display: flex; justify-content: space-evenly; align-items: center; }

Salut ! Moi c’est Pompon. On décore la maison ensemble ?

Le concept

Flexbox, c’est de la déco

Accrocher trois cadres sur un mur, c’est exactement le problème que résout flexbox : répartir des objets dans une boîte. Alors plutôt que des rectangles gris, Maison Flex donne au joueur une vraie maison à décorer. À gauche, le carnet du designer et son éditeur de code. À droite, la pièce, qui obéit au CSS en direct.

liveen direct

Le code à gauche, la pièce à droite

Chaque touche compte : les objets glissent vers leur nouvelle place pendant qu’on tape. On voit immédiatement ce que change space-between par rapport à space-around.

kraftgabarits

Des gabarits en papier kraft

Comme pour un vrai mur de cadres, des gabarits scotchés montrent où va chaque objet. Un ✓ s’épingle dès qu’un objet est en place. Toute solution correcte marche, pas seulement celle du corrigé.

helpPompon

Des messages qui aident vraiment

« centre » au lieu de center, une unité oubliée, un « ; » manquant : le jeu explique l’erreur en français, sur la bonne ligne. Et Pompon, le chat décorateur, glisse un mot quand il le faut.

6pièces

41niveaux

14outils flexbox

123étoiles

~3 hde jeu

0installation

Essaie tout de suite

À toi de décorer

Quatre vraies missions du jeu. Écris ton CSS dans le carnet (ou touche les pastilles de valeurs), et fais coïncider chaque objet avec son gabarit en papier kraft.

🏠 Maison Flex

style.css

1 {

2 display: flex;

}

Quatre missions, zéro gabarit vide !

Tu viens de faire tes premiers pas en flexbox. Dans le jeu, il reste 37 niveaux : des bocaux à l’envers, un mur de polaroids, un tableau de post-it, une clôture de jardin… et le grenier.

▶ Décorer toute la maison

Le plan de la maison

Six pièces, du salon au grenier

Chaque pièce apprend une famille de propriétés et se termine par un défi ★ qui mélange tout. Clique sur une pièce de la maison pour voir son programme.

Pièce 1 · le mur du canapé

Le salon

Premier chantier : le mur au-dessus du canapé. On y accroche des cadres, un miroir et deux appliques, en découvrant les six valeurs de justify-content (jusqu’aux subtiles space-around et space-evenly), puis align-items pour descendre les cadres au ras du canapé.

justify-contentalign-items

1Premier accrochage
2Bien au centre
3Deux lampes, un tableau
4Galerie de chats
5Espaces égaux
6Au ras du canapé
7Le miroir parfait
★Défi du salon

Pièce 2 · la crédence

La cuisine

On fait tourner l’axe principal avec flex-direction et on tombe sur le piège classique : en row-reverse, flex-start et flex-end échangent leur place. Puis order, le premier code qui ne vise qu’un seul objet : la théière passe après les tasses.

flex-directionorder

1À l’envers
2Les bocaux
3Le monde à l’envers
4Pile de tasses
5De bas en haut
6Le thé après
7La poêle d’abord
★Défi de la cuisine

Pièce 3 · le mur du lit

La chambre

align-self descend la lune sans bouger les étoiles. Puis le mur de souvenirs : dix photos sur une seule ligne s’écrasent… jusqu’à ce qu’on les laisse passer à la ligne avec flex-wrap. On finit en constellation, en une seule ligne de flex-flow.

align-selfflex-wrapflex-flow

1Clair de lune
2Beaux rêves
3Mur de souvenirs
4Colonnes de photos
5En partant du bas
6Constellation
★Défi de la chambre

Pièce 4 · le tableau en liège

Le bureau

Des dizaines de post-it à épingler. gap pour aérer, row-gap et column-gap pour doser, puis align-content, qui répartit des lignes entières… et ne fait rien du tout quand il n’y en a qu’une.

gapalign-content

1Un peu d’air
2Lignes et colonnes
3Tout en haut
4Tout en bas
5D’un bord à l’autre
6Bien aéré
★Défi du bureau

Pièce 5 · la clôture

Le jardin

Le chapitre le plus fin. Une jardinière qui grandit (flex-grow), trois jardinières sur mesure (flex-basis), un banc qui refuse de rétrécir (flex-shrink), un portillon poussé par une marge auto, et le raccourci flex pour tout résumer.

flex-growflex-basisflex-shrinkmargin-leftflex

1La jardinière s’étire
2Trois parts
3Sur mesure
4Le banc tient bon
5Pousse le portillon
6Le raccourci
★Défi du jardin

Pièce 6 · sous les poutres

Le grenier

Quatre défis, aucun nouvel outil : tout ce qui précède, mélangé. Le dernier, « La touche finale », demande des lignes centrées et aérées, le globe en premier et une étagère qui s’étire pour remplir sa ligne : trois blocs de code à écrire.

★Grand rangement
★Souvenirs de voyage
★Tête en bas
★La touche finale

Le nuancier

14 outils, tout flexbox

Chaque propriété apprise devient une carte du nuancier, comme un échantillon de peinture, avec sa petite démo vivante. À la fin de la maison, c’est l’antisèche flexbox complète. Touche une valeur pour la voir en action :

justify-content

Répartit les objets sur l’axe principal (horizontal par défaut).

align-items

Aligne les objets sur l’axe secondaire (vertical par défaut).

flex-direction

Choisit le sens de l’axe principal : en ligne ou en colonne, à l’endroit ou à l’envers.

ordersur un objet

Change la place d’un objet. Tout le monde commence à 0 : un nombre plus grand l’envoie plus loin, un négatif le fait passer devant.

align-selfsur un objet

Comme align-items, mais pour un seul objet.

flex-wrap

Autorise les objets à passer à la ligne quand il n’y a plus de place.

flex-flow

Raccourci : flex-direction puis flex-wrap, sur une seule ligne.

gap

L’espace entre les objets. Une valeur pour tout, ou deux : lignes puis colonnes.

align-content

Répartit les lignes d’objets. Ne fait rien s’il n’y a qu’une seule ligne !

flex-growsur un objet

Combien un objet grandit pour remplir la place libre. 0 = il ne grandit pas.

flex-basissur un objet

La taille de départ d’un objet sur l’axe principal, avant de grandir ou de rétrécir.

flex-shrinksur un objet

Combien un objet rétrécit quand la place manque. 0 = il garde sa taille.

margin-leftsur un objet

L’astuce : une marge auto avale toute la place libre et pousse l’objet tout au bout.

flexsur un objet

Raccourci : flex-grow, flex-shrink et flex-basis d’un coup.

Dans le jeu

À quoi ressemble une partie

Papier découpé, traits d’encre qui tremblent comme un dessin animé, scotch washi et lettrage au marqueur : la même patte que Git Quest et Neon Query, dans une maison de poupée. Cliquez sur une image pour l’agrandir.

Le salon · Deux lampes, un tableau

Un carnet et une pièce

À gauche, le carnet à spirale : la mission, Pompon, l’aide-mémoire et l’éditeur « plan d’architecte ». À droite, la pièce. On tape justify-content: space-between;, les appliques filent contre les bords, le paysage reste pile entre les deux.

Une jauge compte les objets posés sur leur gabarit, un ✓ s’épingle sur chacun.
Tout est en place ? Un tampon « Parfait ! » claque et le bouton Suivant s’allume.
Jusqu’à 3 étoiles par niveau : 123 étoiles à gagner dans la maison.

La cuisine · Le thé après

Un nouvel outil, une carte

Chaque nouvelle propriété arrive sur une carte nuancier : ce qu’elle fait en une phrase, et des pastilles qui écrivent la valeur dans le code (pratique au début, et sur téléphone).

Dès la cuisine, certains blocs ne visent qu’un objet : .theiere { order: 1; }
Une étiquette jaune pend sous l’objet visé : on sait toujours à qui on parle.

Le salon · Bien au centre

Des erreurs qui s’expliquent

Après une courte pause, le jeu souligne la ligne fautive et dit pourquoi, en français. Une faute de frappe, un mot français, une unité oubliée, un « ; » manquant : chaque erreur de débutant a son message.

Les propriétés qui déplacent sans flexbox (position, width…) sont poliment refusées.
Complétion par Tab, coloration syntaxique, lignes fixes en lecture seule.

Le jardin · Le banc tient bon

Des indices seulement si on les demande

D’abord un coup de pouce gratuit (quelle propriété, quel bloc), puis un squelette à trous qui coûte une étoile, enfin la solution. On cherche d’abord, on n’est jamais bloqué longtemps.

Après un long moment sans progrès, le bouton Indice clignote et Pompon propose son aide.
Le code tapé et les indices sont gardés niveau par niveau.

La cuisine · Les bocaux

Les axes, enfin visibles

Le vrai déclic de flexbox, c’est de comprendre l’axe principal et l’axe secondaire. Le bouton « Axes » les dessine sur le mur et suit flex-direction et wrap-reverse : en column, on voit justify-content devenir vertical.

L'accueil du jeu : la maison de poupée, ses six pièces et les étoiles gagnées — **La maison se remplit**L’accueil est le plan de la maison : chaque pièce se colore à mesure qu’on la décore, avec ses étoiles.

Défi « Souvenirs de voyage » dans le grenier : deux blocs de code, la malle posée au sol — **Les défis du grenier**Plusieurs blocs, plusieurs propriétés, aucun indice sur l’outil à utiliser : la preuve qu’on a compris.

Le tableau en liège

Les erreurs que le jeu rattrape

Un formateur les corrige cent fois par session. Maison Flex les explique à la seconde, avec les mots du débutant. Voici six vrais messages du jeu :

justify-content: centre;

« centre » n’est pas une valeur possible pour justify-content. Tu voulais dire center ?

Les mots français sont compris et corrigés : centre, droite, gauche, bas…

gap: 30;

Il manque l’unité : écris 30px.

L’oubli le plus fréquent en CSS, repéré tout de suite.

justfy-content: center;

« justfy-content » n’existe pas. Tu voulais dire justify-content ?

Une faute de frappe ? Le jeu propose la bonne propriété.

justify-content: center
align-items: center;

Il manque un « ; » à la fin de cette ligne : la ligne suivante ne marche pas non plus.

Exactement comme un vrai navigateur : une ligne cassée casse la suivante.

position: absolute;

« position » existe, mais ici on déplace les objets uniquement avec flexbox.

Pas de raccourci : on apprend flexbox, pas à tricher.

display: block;

Sans display: flex, flexbox ne fonctionne plus !

Le point de départ de tout, qu’on n’oublie plus.

Du salon à ton vrai site

Les mêmes lignes, sur de vraies interfaces

Le CSS du jeu est du vrai CSS. Chaque niveau cache une situation qu’on rencontre dès qu’on intègre une page web : les voici, rendues ici avec exactement le même code.

Le salon« Deux lampes, un tableau »

justify-content: space-between;
align-items: center;

devient Une barre de navigation

Le salon« Le miroir parfait »

justify-content: center;
align-items: center;

devient Centrer une fenêtre (enfin !)

La chambre« Mur de souvenirs »

flex-wrap: wrap;
gap: 8px;

devient Une grille de cartes produits

Le jardin« La jardinière s’étire »

.champ {
  flex-grow: 1;
}

devient Une barre de recherche

Le jardin« Pousse le portillon »

.sortie {
  margin-left: auto;
}

devient Le bouton « Déconnexion » à droite

Le jardin« Le banc tient bon »

.avatar {
  flex-shrink: 0;
}

devient Un avatar qui ne s’écrase pas

Formateurs, écoles, entreprises

Le module flexbox que vos apprenants terminent

Suivi pièce par pièce : qui avance, qui bloque, et sur quelle propriété (axes, retour à la ligne, grow et shrink…).
Zéro installation : tout se passe dans le navigateur, même sur un poste verrouillé, une tablette ou un téléphone.
Une vraie compréhension : toute solution correcte est acceptée, on ne recopie pas un corrigé. Les défis sans indice d’outil le prouvent.
~3 h de jeu en sessions courtes, idéal avant un atelier d’intégration web ou en autonomie entre deux cours.

L'utiliser avec ma classe Découvrir le suivi

L'écran de fin : « La maison est prête ! », 123 étoiles sur 123 et les six pièces décorées

Maison Flex sur téléphone : la cuisine épinglée en haut, le carnet dessous

Questions

Tout savoir sur Maison Flex

Faut-il savoir coder pour jouer à Maison Flex ?

Non. Il suffit de savoir qu’une règle CSS s’écrit propriété: valeur;, et le premier niveau le montre. Chaque nouvelle propriété arrive sur une carte « Nouvel outil », avec des pastilles de valeurs qui écrivent la ligne à votre place au début.

Est-ce du vrai CSS ?

Oui. Les cadres, bocaux et post-it sont de vrais éléments HTML, placés par le navigateur avec le code tapé par le joueur. On écrit exactement ce qu’on écrirait dans une feuille de style, et toute solution correcte est acceptée : le jeu vérifie que chaque objet recouvre son gabarit, pas que le code ressemble à un corrigé.

Combien de temps faut-il pour finir Maison Flex ?

Comptez environ 3 h pour les 41 niveaux et les 6 pièces. La progression et le code de chaque niveau sont sauvegardés : on joue par sessions de 20 minutes et on reprend où on s’était arrêté.

Que se passe-t-il quand un apprenant bloque ?

Les indices arrivent seulement quand on les demande, en trois temps : d’abord la propriété à utiliser (gratuit), puis un squelette de code à trous (−1 étoile), enfin la solution. Après un long moment sans progrès, le bouton Indice clignote et Pompon propose son aide.

Peut-on utiliser Maison Flex en formation ?

Oui, c’est fait pour. Un formateur l’assigne à sa classe en un clic et suit la progression de chaque apprenant, pièce par pièce et niveau par niveau : qui avance, qui bloque, et sur quelle propriété.

Est-ce que Maison Flex fonctionne sur téléphone ?

Oui. Sur un téléphone, la pièce reste épinglée en haut de l’écran et le carnet défile dessous. Les pastilles de valeurs permettent de jouer sans clavier.

Maison Flex est-il gratuit ?

Oui, Maison Flex est gratuit, sans publicité, et se joue directement dans le navigateur. Rien à installer.

Le jeu est-il en français ?

Oui, en français et en anglais : on change de langue à tout moment depuis l’accueil ou les réglages.

Les gabarits sont au mur. Il ne manque que toi.

Pompon a sorti le mètre ruban, les cadres attendent dans les cartons. Première mission : le mur du canapé.

▶ Jouer L'utiliser avec ma classe

Autres jeux Reverb Games

Les autres jeux

République en Kit Agora Hangeul Express Mémoire Vive Intox Neon Query Zéro Faille Biais & Bâtons Git Quest RGPD.exe Premier Réflexe Hameçon Kana Shinkansen Rideau de Fer Coup de Pinceau Cellule 404 Bon à tirer Bas de Laine Consignation Fourche Levée Marche en Avant Dos Droit Point de Rassemblement Mise au point Électron Libre