Informatik Webentwicklung – Flexbox und Grid
Karteikarten zum Thema „Informatik“ · 15 Karten · von atrio. Beispiele: Was ist der Hauptunterschied zwischen Flexbox und Grid? · Wie definiert man ein Eleme…
Karten
15 KartenWas ist der Hauptunterschied zwischen Flexbox und Grid?
Rückseite
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?
Rückseite
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?
Rückseite
justify-content richtet Items entlang der Hauptachse aus, die standardmäßig horizontal (row) verläuft.
Was bewirkt align-items: center im Flex-Container?
Rückseite
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?
Rückseite
grid-template-columns: repeat(3, 1fr) erzeugt drei Spalten, die sich den verfügbaren Platz proportional teilen.
Was bedeutet der Wert 1fr in grid-template-columns?
Rückseite
1fr (fraction unit) steht für einen proportionalen Anteil am freien Platz im Grid-Container.
Wie lässt sich ein Grid-Item über mehrere Zeilen und Spannen strecken?
Rückseite
Mit grid-column: span 2 und grid-row: span 3 erstreckt sich das Item über zwei Spalten und drei Zeilen.
Welche Eigenschaft definiert den Abstand zwischen Grid-Zellen?
Rückseite
gap (bzw. row-gap und column-gap) legt den Abstand zwischen benachbarten Grid-Zeilen und -Spalten fest.
Wie macht man ein Flex-Layout responsiv ohne Media Queries?
Rückseite
flex-wrap: wrap erlaubt Items, bei Platzmangel in neue Zeilen umzubrechen, statt sich zu quetschen.
Was ist der Unterschied zwischen auto-fit und auto-fill bei repeat()?
Rückseite
auto-fit kollabiert leere Tracks, auto-fill behält sie bei; beide passen die Spaltenanzahl dynamisch an die Containerbreite an.
Wie zentriert man ein einzelnes Element horizontal und vertikal mit Grid?
Rückseite
place-items: center auf dem Grid-Container zentriert ein einzelnes Kind-Element in beide Richtungen gleichzeitig.
Welche Eigenschaft ändert die visuelle Reihenfolge eines Flex-Items?
Rückseite
Die order-Eigenschaft mit ganzzahligen Werten verändert die Darstellungsreihenfolge, ohne das HTML-Markup anzupassen.
Was bewirkt align-self auf einem einzelnen Flex-Item?
Rückseite
align-self überschreibt die vom Container vorgegebene align-items-Ausrichtung für dieses einzelne Item auf der Querachse.
Wie heißen die Trennlinien zwischen Grid-Zellen?
Rückseite
Grid-Lines sind die horizontalen und vertikalen Linien, die Zellen begrenzen und nummeriert referenzierbar sind.
Wann sollte man Flexbox statt Grid verwenden?
Rückseite
Flexbox eignet sich für eindimensionale Layouts wie Navigationsleisten oder Karten, Grid für zweidimensionale Seitenstrukturen.