Arbeiten mit Flex-Elementen

Flex-Items sind die Kindelemente des Flex-Containers. Sie sind keine Inline- oder Block-Elemente mehr. Daher können die Eigenschaften der Items angepasst werden, um die gewünschte Positionierung zu erreichen.

flex-basis

]flex-basis] definiert die Anfangsgröße eines Flex-Items, bevor zusätzlicher Platz verteilt wird. Der Wert kann mit px, %, em oder auto (Größe basierend auf dem Inhalt) gesetzt werden.

flex-basis: auto | value;

flex-grow

Die Eigenschaft flex-grow bestimmt die Fähigkeit eines Flex-Elements, im Verhältnis zu anderen Elementen innerhalb eines Flex-Containers zu wachsen, wenn zusätzlicher Platz verfügbar ist.

Die Eigenschaft flex-grow akzeptiert einen einheitenlosen Wert, der die relative Größe des Flex-Elements im Vergleich zu anderen Elementen angibt. Zum Beispiel: Wenn ein Element einen flex-grow-Wert von 2 und ein anderes einen Wert von 1 hat, wächst das erste Element doppelt so stark wie das zweite, wenn im Flex-Container zusätzlicher Platz vorhanden ist.

order

Die Eigenschaft order wird verwendet, um die Anzeigereihenfolge von Flex-Elementen innerhalb ihres Containers festzulegen. Standardmäßig werden Flex-Elemente in der Reihenfolge angezeigt, in der sie im HTML-Dokument erscheinen. Mit der Eigenschaft order kann diese Reihenfolge jedoch angepasst werden.

Der Wert von order kann eine beliebige Zahl sein. Selbst wenn nur 3 Elemente vorhanden sind, bedeutet die Zuweisung von order: 1000; zum zweiten Element nicht, dass es 1000 Elemente gibt. Es bedeutet lediglich, dass das zweite Element an die letzte Position verschoben wird. Haben mehrere Elemente denselben order-Wert, positioniert der Browser sie in der Reihenfolge, in der sie im HTML-Dokument erscheinen. Anschließend wird die order der Elemente in der folgenden Liste neu angeordnet. Die Aufgabe besteht darin, das dritte Element an die erste Position zu setzen.