Final

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

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?

Ü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

Wie sorgt ihr dafür, dass ein <details>-Element beim Laden der Seite schon aufgeklappt ist?

<details expanded>

expanded ist kein gültiges Attribut für <details>.
<details open>
Per CSS mit details { display: block; }

<details> ist ohnehin ein Block-Element - das steuert nicht, ob es aufgeklappt ist.
Das geht nur mit JavaScript

Quiz-Fortschritt

0 / 0 Fragen beantwortet (0%)

0 richtig