Learn CSS Flexbox and Grid in French: 58 Flashcards on Axe Principal, Pistes and Grilles

Already know justify-content and align-items by heart, but need to explain them to a French team, read MDN in French, or prepare a French-language exam? The Flip It deck CSS : Flexbox et Grid (code BC4316, 58 cards) is the French edition of our English Flexbox & Grid deck: the fronts stay in English (property names never get translated), the backs are written in French. That makes it a terminology deck as much as a layout deck.

Real cards from BC4316

The French vocabulary you'll pick up

axe principal, axe transversal, conteneur flexible, éléments flexibles, éléments de grille, grandir / rétrécir, base (flex-basis), retour à la ligne (flex-wrap), unité fractionnaire, piste (track), cellule, ligne de grille, grille implicite / explicite, zones nommées, combler les trous (dense), espacement (gap), ordre visuel, pied de page collant, empilement (z-index), sous-grille.

Tip 1: the "ligne" trap

French uses ligne for three different things in this deck: a row (card 20, grid-template-rows = « les lignes de la grille »), a grid line (card 44, « les lignes de séparation ») and a flex line (card 9, « plusieurs lignes »). Card 25 even says « grid-row: 2 / 4 couvre les lignes 2-3 », where the first "lignes" are separators and the second are rows. When you study, mentally tag each one: rangée for a row, ligne de grille for the numbered separator. MDN France also uses rangée — adopting it removes the ambiguity entirely.

Tip 2: three backs to sharpen

• Card 10 says align-content works « uniquement avec flex-wrap: wrap ». Add wrap-reverse: the rule is "only on a multi-line container".
• Card 12: « flex-grow: 2 grandit deux fois plus que 1 » means it receives twice the espace restant, not that the element ends up twice as wide. Rewrite the back with « reçoit deux fois plus d'espace libre ».
• Cards 43 and 57 (order, row-reverse) change the visual order only: keyboard focus and screen readers still follow the HTML. Add « attention : l'ordre de tabulation ne change pas » to both.

Like the English edition, the deck never says that justify-items / justify-self sont ignorés en Flexbox: to push one flex item to the end, use margin-left: auto.

Study plan

Drill cards 1-16 (Flexbox), then the grid vocabulary (44-46, 52-53) before the placement cards (24-32). Finish with the recipes (47-51, 54-56), saying each one aloud in French as if explaining it to a colleague.

Prefer the explanations in English? Read the original Flexbox and Grid article, then search for BC4316 in the Flip It library.