Zum Inhalt springen

Flexbox

flex-shrink

#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

#flex-flow Kurzschreibweise für flex-direction und flex-wrap.

align-items

#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

#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

#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

#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

#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

#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

#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

#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

#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… 

Nach oben