Zusammenfassung

In dieser Lektion hast du den oberen Teil der Startseite des Tierheims ausgelegt und gelernt:

• Jeder Wert von display hat seine Klasse: block, inline-block, inline, flex, grid. hidden ist display: none: Das Element wird nicht angezeigt und braucht keinen Platz.
• flex macht einen Flex-Container. flex-row (der Standard) und flex-col legen die Richtung seiner Hauptachse fest.
• gap-* legt die Abstände zwischen Flex-Items und Grid-Zellen fest, mit den Zahlen der Abstandsskala; gap-x-* und gap-y-* legen sie getrennt fest.
• justify-* verteilt die Items entlang der Hauptachse (justify-content): justify-start, justify-center, justify-end, justify-between, justify-around, justify-evenly.
• items-* platziert sie auf der Querachse (align-items): items-stretch (der Standard), items-start, items-center, items-end, items-baseline.
• flex-wrap schiebt die Items, die nicht passen, in die nächste Zeile. grow und flex-1 lassen ein Item in den freien Platz wachsen, und shrink-0 verhindert, dass es schmaler wird.
• grid mit grid-cols-* macht ein Grid aus gleich breiten Spalten (repeat(2, minmax(0, 1fr))). col-span-*, col-span-full und row-span-* strecken ein Element über mehrere Zellen.
• Um Items in beide Richtungen zu zentrieren, nimm flex items-center justify-center und eine Höhe wie min-h-96. Ein einzelnes Kind lässt sich auch mit grid place-items-center zentrieren.
• relative, absolute, fixed und sticky legen position fest, und top-*, right-*, bottom-*, left-* und inset-* die Verschiebungen. Ein absolut positioniertes Element wird in seinem nächsten Vorfahren mit einer Position platziert, meist einem mit relative.
• sticky top-0 hält eine Kopfzeile oben im Fenster, und z-* entscheidet, welches Element oben liegt.
• Wie in den früheren Lektionen: Wenn zwei Klassen dieselbe Eigenschaft setzen, entscheidet ihre Reihenfolge im Attribut class nicht, welche gewinnt. Ersetze also eine Klasse, statt eine zweite hinzuzufügen.

Deine Seite hat jetzt ihr Layout, reagiert aber noch nicht auf den Besucher. Als Nächstes kommt ein weiteres kleines Projekt: eine Galerie für einen Fotowettbewerb, mit Karten und einem eigenen Layout. Danach, in der Lektion Hover, Fokus und andere Zustände, sorgst du dafür, dass sich die Buttons und Links deiner Seite verändern, wenn die Maus darüber ist oder sie angeklickt werden.

Bevor du gehst, noch eine kurze Übung. Wir haben am Ende der Seite einen Footer hinzugefügt, mit drei Spalten voller Informationen und einer Zeile mit dem Copyright und einem Link zurück nach oben. Vorerst steht alles darin untereinander.