Zusammenfassung

In dieser Lektion haben wir gelernt, Elemente mit Flexbox anzuordnen, und herausgefunden, dass:

• die Deklaration display: flex ein Element zu einem Flex-Container macht und seine Kinder zu Flex-Items werden.
• Flex-Items entlang der Hauptachse nacheinander platziert werden. Die Querachse steht im rechten Winkel dazu.
• flex-direction die Richtung der Hauptachse festlegt: row (eine Reihe, der Standard), column (eine Spalte), row-reverse oder column-reverse.
• justify-content die Items entlang der Hauptachse verteilt: flex-start (der Standard), center, flex-end, space-between, space-around oder space-evenly.
• align-items die Items auf der Querachse platziert: stretch (der Standard), flex-start, center oder flex-end.
• du etwas in beide Richtungen zentrierst, indem du seinem Elternelement display: flex, justify-content: center und align-items: center gibst.
• gap die Lücken zwischen Flex-Items festlegt: nur zwischen ihnen, nie an den Rändern.
• Flex-Items in einer Zeile bleiben und schrumpfen, wenn sie nicht hineinpassen. Mit flex-wrap: wrap rutschen sie stattdessen in die nächste Zeile.
• flex-grow bei einem Flex-Item sagt, wie viel vom freien Platz es bekommt. flex: 1 lässt ein Item ebenfalls wachsen, aber von einer Ausgangsgröße von null aus, nicht von seiner Breite.

Flexbox ordnet Items in einer Richtung an: in einer Reihe oder in einer Spalte. Als Nächstes kommt das letzte kleine Projekt: eine Seite mit Preisen, die du selbstständig mit Flexbox anordnest und positionierst. Danach lernst du in der Lektion CSS Grid, Elemente in Zeilen und Spalten gleichzeitig anzuordnen.