Wer steht wo im Bus?
Im Bus stehen Leute in einer Reihe. Manche stehen vorn, manche hinten, manche verteilen sich im ganzen Gang.
Auf einer Webseite willst du Elemente auch in einer Reihe oder Spalte anordnen. Dafür gibt es Flexbox.
Am Ende dieser Lektion
Notiz
Ich kann mit Flexbox Elemente in einer Reihe oder Spalte anordnen.
Schlüsselwörter
| Begriff | Was er bedeutet | Beispiel |
|---|---|---|
| Flexbox | Eine Art, Elemente in einer Reihe oder Spalte anzuordnen. | |
| Container | Das Element, das andere Elemente enthält. | |
| Hauptachse | Die Richtung, in der die Elemente stehen. | |
| Abstand | Der Platz zwischen zwei Elementen. | gap: 10px; |
| Spalte | Elemente stehen untereinander. | flex-direction: column; |
Die Zellen, die Lernende ausfüllen, bleiben in dieser Vorschau leer.
Start: Das weißt du schon
Probier es aus
Start: Das weißt du schon
4 FragenDeine Antworten werden hier bewertet und nicht gespeichert. Mit einem Konto bleiben deine Ergebnisse erhalten.
Der Container wird flexibel
Ohne Flexbox stehen Blöcke untereinander. Mit display: flex; auf dem Container stehen die Kinder nebeneinander.
Die Regel gehört zum äußeren Element, nicht zu den Kindern. Mit gap stellst du den Abstand zwischen ihnen ein.
Probiere es aus: Kästen in einer Reihe
<div class="reihe">
<div class="kasten">1</div>
<div class="kasten">2</div>
<div class="kasten">3</div>
</div>
Kontrolle: display flex
Probier es aus
Kontrolle: display flex
3 FragenDeine Antworten werden hier bewertet und nicht gespeichert. Mit einem Konto bleiben deine Ergebnisse erhalten.