Informatik Webentwicklung – Flexbox und Grid
Flexbox und Grid sind die Standards für moderne CSS-Layouts. Nach dem Lernen dieser Karten kennst du die wichtigsten Eigenschaften, um flexible, responsive Oberflächen ohne Framework zu bauen – vom einfachen Navigationsmenü bis zum komplexen Dashboard.
Lernziele
Was du in dieser Lektion lernst
- Was ist der Hauptunterschied zwischen Flexbox und Grid?
- Wie definiert man ein Element als Flex-Container?
- Welche Achse steuert justify-content im Flexbox-Modell?
- Was bewirkt align-items: center im Flex-Container?
Lerntipp
Baue ein kleines Layout (Header, Sidebar, Content, Footer) einmal mit Flexbox und einmal mit Grid nach – der direkte Vergleich zeigt dir sofort, wann welches System effizienter ist.
Hinweis: Der Inhalt dieser Seite wurde mit einem KI-Modell erzeugt und nicht von Fachmenschen geprüft. Nutze die Karten als Lernhilfe und gleiche medizinische oder rechtliche Aussagen mit deinen Unterlagen ab.
Karteikarten
Alle 15 Lernkarten
Tippe auf eine Karte, um die Antwort aufzudecken
Häufige Fragen
Die wichtigsten Fragen zu Informatik Webentwicklung – Flexbox und Grid
- Was ist der Hauptunterschied zwischen Flexbox und Grid?
- Flexbox ist eindimensional und verteilt Items entlang einer Achse, Grid ist zweidimensional und steuert Zeilen und Spalten gleichzeitig.
- Wie definiert man ein Element als Flex-Container?
- Durch display: flex oder display: inline-flex wird das Element zum Flex-Container, dessen direkte Kinder automatisch zu Flex-Items werden.
- Welche Achse steuert justify-content im Flexbox-Modell?
- justify-content richtet Items entlang der Hauptachse aus, die standardmäßig horizontal (row) verläuft.
- Was bewirkt align-items: center im Flex-Container?
- align-items: center zentriert alle Flex-Items vertikal auf der Querachse, sofern der Container höher ist als die Items.
- Wie erstellt man ein Grid mit drei gleichbreiten Spalten?
- grid-template-columns: repeat(3, 1fr) erzeugt drei Spalten, die sich den verfügbaren Platz proportional teilen.
Warum Atrio?
- FSRS-5 Spaced Repetition
- Der Algorithmus plant jede Wiederholung anhand deiner eigenen Lernhistorie und stellt Karten kurz bevor du sie vergisst – das reduziert unnötige Wiederholungen.
- KI-Import
- Notizen, Skripte und PDFs in Sekunden in Lernkarten verwandeln – genau wie diese Seite automatisch entsteht.
- Prüfungsplanung
- Termine hinterlegen und Atrio berechnet rückwärts, wie viele Karten du pro Tag lernen musst – ohne Stress.
Interaktiv lernen
Diese 15 Karten jetzt interaktiv in der Atrio-App lernen
Atrio zeigt dir jede Karte dann, wenn du sie fast vergessen hättest – damit bleibt genau das hängen, was du lernst.
Starter-Plan kostenlos – keine Kreditkarte erforderlich.