#flex-shrink Legt fest, wie stark ein Flexbox-Element schrumpfen soll, wenn nicht genug Platz vorhanden ist. default flex-shrink: 1; Wenn nicht genug Platz in der Hauptachse des Containers vorhanden ist, wird das Element um den Faktor 1 schrumpfen…
#flex-flow Kurzschreibweise für flex-direction und flex-wrap. Die Eigenschaft flex-flow ist eine Kurzform für die Eigenschaften flex-direction und flex-wrap in CSS. Die Eigenschaft flex-direction gibt die Richtung an, in der Flex-Elemente angeordnet werden, und die Eigenschaft flex-wrap legt…
#align-items Legt fest, wie Flexbox-Elemente innerhalb einer Zeile eines Flexbox-Containers an der Querachse ausgerichtet werden. align-items: flex-start; Die Flexbox-Elemente werden am Start der Querachse ausgerichtet. Standardmäßig ist die Querachse vertikal. Das bedeutet, dass die Flexbox-Elemente vertikal an…
#align-content Legt fest, wie jede Zeile innerhalb eines Flexbox/Grid-Containers ausgerichtet wird. Sie gilt nur, wenn flex-wrap: wrap vorhanden ist und wenn es mehrere Zeilen von Flexbox/Grid-Elementen gibt. default align-content: stretch; Jede Zeile wird so gedehnt, dass sie…
#align-self Funktioniert wie align-items, gilt aber nur für ein einzelnes Flexbox-Element, statt für alle davon. default align-self: auto; Das Ziel wird den Wert von align-items verwenden. 1 Target 3 4 5 align-self: flex-start; Wenn der Container align-items:…
#flex-direction Legt fest, wie Flexbox-Elemente innerhalb eines Flexbox-Containers angeordnet werden. default flex-direction: row; Die Flexbox-Elemente sind in der gleichen Weise wie die Textrichtung angeordnet, entlang der Hauptachse. 1. One 2. Two 3. Three 4. Four flex-direction: row-reverse;…
#flex-wrap Legt fest, ob Flexbox-Elemente in einer einzigen Zeile oder in mehreren Zeilen innerhalb eines Flexbox-Containers erscheinen. default flex-wrap: nowrap; Die Flexbox-Elemente bleiben auf einer einzigen Zeile, egal was passiert, und werden schließlich überlaufen, wenn nötig. 1.…
#flex-basis Bestimmt die Anfangsgröße eines Flexbox-Elements. default flex-basis: auto; Die Größe des Elements wird automatisch auf der Grundlage seines Inhalts oder eines height – oder width -Werts angepasst, falls diese definiert sind. Flexbox item flex-basis: 80px; Sie…
#flex-grow Legt fest, wie stark ein Flexbox-Element wachsen soll, wenn Platz vorhanden ist. default flex-grow: 0; Das Element wird nicht wachsen, wenn noch Platz vorhanden ist. Es wird nur den Platz nutzen, den es braucht. Target Item…
#order Bestimmt die Reihenfolge eines Flexbox-Elements. default order: 0; Die Reihenfolge der Flexbox-Elemente ist die, die im HTML-Code definiert ist. One order: 0 Two order: 0 Target order: 0 Four order: 0 order: 1; Die Reihenfolge ist…
#justify-content Legt fest, wie Flexbox/Grid-Elemente innerhalb eines Flexbox/Grid-Containers an der Hauptachse ausgerichtet werden. default justify-content: flex-start; Die Flexbox/Grid-Elemente werden zum Start der Hauptachse des Containers geschoben. 1. One 2. Two 3. Three justify-content: flex-end; Die Flexbox/Grid-Elemente werden…