Final

Ein Quiz über Layout zum Abschluss. Testet euer Wissen - die Antworten werden nur lokal in eurem Browser gespeichert.

Ein Element hat position: absolute, aber kein Vorfahre im Dokument hat position: relative (oder absolute/fixed/sticky) gesetzt. Wonach richtet sich die Positionierung?

Das Element bleibt an seiner ursprünglichen Stelle im normalen Fluss stehen

Das wäre das Verhalten von position: static oder relative ohne top/left.
Relativ zum gesamten Dokument (praktisch: relativ zu <html>)
Der Browser zeigt einen Fehler, weil kein Bezugsrahmen existiert
Relativ zum direkten Elternelement, unabhängig von dessen position

Ohne passenden Vorfahren sucht der Browser weiter nach oben, bis zum Dokument.

Deshalb gilt die Faustregel „Absolute is relative to relative”: Ein position: relative-Elternelement ganz bewusst als Bezugsrahmen zu setzen, verhindert dieses Abrutschen zum ganzen Dokument.

Bei flex-direction: row - welche Property steuert die Ausrichtung auf der Hauptachse?

justify-content
align-items

align-items steuert die Querachse - bei row also die vertikale Ausrichtung.
flex-wrap

flex-wrap steuert den Umbruch auf neue Zeilen, keine Ausrichtung.
grid-template-columns

Das ist eine Grid-Property, keine Flexbox-Property.

Ein Flex-Container hat flex-direction: column. Welche Property zentriert die Kinder jetzt horizontal?

justify-content: center

Bei column ist die Hauptachse vertikal - justify-content zentriert hier also vertikal, nicht horizontal.
align-items: center
flex-wrap: wrap
gap: center

gap erwartet eine Längeneinheit, keinen Ausrichtungswert.

Dreht sich die Hauptachse durch flex-direction: column, tauschen justify-content und align-items praktisch ihre Bedeutung.

Ohne flex-wrap: wrap - was passiert, wenn zu viele Flex-Items in eine Zeile sollen?

Überzählige Elemente werden automatisch in die nächste Zeile verschoben

Das ist genau das Verhalten von flex-wrap: wrap - ohne diese Property passiert es NICHT automatisch.
Die Elemente werden zusammengequetscht, bleiben aber in einer Zeile
Überzählige Elemente werden unsichtbar
Der Browser zeigt einen Fehler

Was bedeutet flex: 0 0 250px?

Das Element wächst nicht, schrumpft nicht, startet mit 250px Breite - eine feste Breite
Das Element ist genau 250px hoch

flex-basis (der dritte Wert) gibt die Ausgangsgröße vor, keine feste Höhe.
Das Element wächst maximal auf 250px

flex-grow: 0 bedeutet, dass das Element gar NICHT wächst.
Syntax-Fehler, flex erlaubt nur einen Wert

Ein Grid hat grid-template-columns: 200px 1fr 2fr bei 800px Gesamtbreite. Wie breit ist die letzte Spalte ungefähr?

200px
300px
400px
800px

Übrig nach der festen Spalte: 800px - 200px = 600px. Verteilt im Verhältnis 1 zu 2 auf die beiden fr-Spalten: 200px und 400px.

Welche Aussage zu grid-template-areas stimmt?

Eine Area muss immer ein Rechteck bilden - eine L-Form ist nicht erlaubt
Ein Punkt (.) markiert ein Pflichtfeld

Ein Punkt markiert im Gegenteil ein Feld, das frei bleibt - kein Pflichtfeld.
Jede Area darf nur genau ein Feld des Grids belegen

Eine Area kann mehrere Felder überspannen, solange ein Rechteck entsteht.
grid-template-areas funktioniert nur mit fr-Einheiten

Ihr sollt ein ganzes Seiten-Layout mit Header, Sidebar, Hauptbereich und Footer bauen. Was ist die naheliegendere Wahl?

Flexbox, weil es einfacher ist

Für ein zweidimensionales Layout (Zeilen UND Spalten) ist Grid meist die passendere, nicht unbedingt einfachere Wahl.
Grid, weil Zeilen und Spalten gleichzeitig kontrolliert werden müssen
Keins von beiden, das geht nur mit float

float ist veraltet und wurde für genau solche Layouts durch Grid abgelöst.
Beide sind für diesen Fall ungeeignet

Quiz-Fortschritt

0 / 0 Fragen beantwortet (0%)

0 richtig