Learn CSS Flexbox and Grid in German: 58 Flashcards on Hauptachse, Spuren and Zellen
Learn CSS Flexbox and Grid with German backs: 58 real flashcards on Hauptachse, Querachse, Spur and Zelle, plus the Zeile trap and three backs to fix.
Studying. But it's also a video game. 🎮
Flashcards, quizzes and games that make you actually remember.
Posted by
FLIP IT TeamRelated reading
Learn Vue.js Core Concepts: 30 Flashcards on Reactivity, Directives and the Vue Ecosystem
Learn Vue.js with deck XT7941: 30 flashcards on directives, virtual DOM, reactivity, computed vs watch, Pinia, Vue Router and Vite, plus the cards to update.
OWASP Top 10 Flashcards: Study the 2021 List and Update It for 2025
Study OWASP Top 10 with 35 flashcards on injection, SSRF, SAST, DAST, IAST and RASP, then add the missing #1 risk and the new OWASP 2025 ranking.
CSS Flexbox and Grid in Spanish: Memorize 58 Flashcards on Ejes, Pistas and Cuadrícula
Spanish edition of the Flexbox & Grid deck: 58 real cards on eje transversal, pistas and cuadrícula, plus the translation traps sobrescribir, envolver, grilla.
The deck CSS: Flexbox & Grid (code HM0314, 58 cards) is the German edition of our English Flexbox & Grid deck: English fronts (Flex-grow, Grid track, Minmax()), German backs. It is a good fit if you code in English but read German docs, or work in a German-speaking team and need to explain layouts out loud: Hauptachse, Querachse, Spur, Zelle.
Study this deck: CSS: Flexbox & Grid
1 / 10Flexbox
Tap the card for the answer · swipe right if you knew it, left if not
Real cards from the deck
| Front | Back (German) |
|---|---|
| Main axis in Flexbox | Die Hauptachse, entlang der Flex-Items angeordnet werden. Die Richtung wird durch flex-direction festgelegt. |
| Cross axis in Flexbox | Die Achse senkrecht zur Hauptachse. |
| Flex-wrap | Steuert, ob Flex-Items auf mehrere Zeilen umbrechen. Werte: nowrap, wrap, wrap-reverse. |
| Fr unit in CSS Grid | Fraktionale Einheit, die einen Anteil des verfügbaren Platzes darstellt. |
| Grid track | Der Raum zwischen zwei benachbarten Grid-Linien. Eine Spalte oder Zeile. |
| Auto-fit vs auto-fill in Grid | auto-fill behält leere Spuren bei; auto-fit lässt sie kollabieren. |
| gap vs margin | gap: nur Platz zwischen den Items (keine äußeren Ränder). |
| Create a sticky footer with Flexbox | flex-direction: column; min-height: 100vh. Hauptinhalt: flex: 1. |
| Subgrid | Erlaubt einem Grid-Item, die Spuren des übergeordneten Grids zu erben. |
German vocabulary you'll pick up
Hauptachse (main axis), Querachse (cross axis), Flex-Container, Kindelemente, umbrechen (wrap), Basisgröße (flex-basis), wachsen / schrumpfen (grow / shrink), Spalte (column), Zeile (row), Grid-Linie, Spur (track), Zelle (cell), benannte Bereiche (named areas), explizites / implizites Grid, Mindest- und Höchstgröße (minmax), übergeordnetes Grid (parent grid), Stapelreihenfolge (stacking order), Geschwister (siblings), zentrieren.
Tip 1: "Zeile" means three different things
The German backs use Zeile for a flex row direction (card 1: Zeile oder Spalte), for a wrapped flex line (cards 9-10: auf mehrere Zeilen umbrechen) and for a grid row (card 20, grid-template-rows). In English those are three separate concepts: row, flex line and grid row. Add a hint to cards 9 and 10 — Flex-Zeile (flex line) — so you never think align-content touches grid rows when you're in Flexbox. The same goes for Spur: it is always a track (a column or row of the grid), never a line.
Also read horizontal / vertikal in cards 35-41 as Inline-Achse / Block-Achse: they only hold true in left-to-right horizontal writing modes.
Tip 2: fix three backs as you review
- Card 12 says flex-grow: 2 wächst doppelt so stark wie 1. Precisely: the item gets twice the share of the free space, not twice the final width. Write Anteil am freien Platz on the back.
- Card 43 (order) changes the visual order only — keyboard tab order and screen readers still follow the HTML. Add Tab-Reihenfolge bleibt gleich: it's an accessibility trap (WCAG 1.3.2 and 2.4.3).
- Card 47 (flex: 1 for equal columns) needs min-width: 0, or long content will break the equal widths.
How to study it
- Cards 1-16 (Flexbox), then the vocabulary cards 44-46 and 52-53 (Linie, Spur, Zelle, explizit/implizit) before the Grid placement cards 17-41.
- Pair recipes in both systems: 16 ↔ 35 (centering), 47 ↔ 48 (equal columns).
- Say each answer in German out loud, then type the CSS in a sandbox.
Find the deck in the Flip It library with code HM0314 at flip-it.app. Prefer English backs? Read the original Flexbox and Grid guide, or continue in German with the Box-Modell, Selektoren and Media Queries edition.
Ready to learn faster? 🚀
Join FLIP IT for free and turn studying into a game.