Summary  
This chapter explains how to control flex item behavior within a flex container using the flex-basis property for initial sizing, flex-grow for distributing extra space, and order for rearranging item sequence.

General domain of usage  
Responsive web page layout and UI component arrangement.

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

## flex-basis
]flex-basis] definiert die Anfangsgröße eines Flex-Items, bevor zusätzlicher Platz verteilt wird.
Es kann mit `px`, `%`, `em` oder `auto` (Größe basierend auf dem Inhalt) festgelegt werden.
```css
flex-basis: auto | value;
```

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDx1bCBjbGFzcz0iYmxvZy1saXN0Ij4KICAgICAgPGxpIGNsYXNzPSJibG9nLWl0ZW0iPgogICAgICAgIDxwIGNsYXNzPSJhcnRpY2xlIj4KICAgICAgICAgIExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0IGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIE9mZmljaWlzIGFkCiAgICAgICAgICBhdXRlbSBjdXBpZGl0YXRlIGVhcnVtIHN1c2NpcGl0IGFiIGF1dCBoaWMgb21uaXMsIGZ1Z2l0IHF1aSBzZWQKICAgICAgICAgIGFzcGVybmF0dXIgZGVzZXJ1bnQgZG9sb3JlcyByZXByZWhlbmRlcml0IG1vbGxpdGlhIGludmVudG9yZSBsYWJvcmUsCiAgICAgICAgICBmdWdpYXQgcmF0aW9uZSEKICAgICAgICA8L3A+CiAgICAgIDwvbGk+CiAgICAgIDxsaSBjbGFzcz0iYmxvZy1pdGVtIj4KICAgICAgICA8cCBjbGFzcz0iYXJ0aWNsZSI+CiAgICAgICAgICBMb3JlbSBpcHN1bSwgZG9sb3Igc2l0IGFtZXQgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gU29sdXRhCiAgICAgICAgICBwcm92aWRlbnQgdm9sdXB0YXR1bSBmYWNlcmUgZWFydW0sIGFuaW1pIGRlYml0aXMgYXQsIHF1b2QgZXQgZXhwZWRpdGEsCiAgICAgICAgICBoaWMgbWFnbmkuIE1pbnVzIGRlbGVjdHVzIHByYWVzZW50aXVtIHZlbCBvZmZpY2lpcyBudWxsYSBpcHNhIHJhdGlvbmUKICAgICAgICAgIGltcGVkaXQuCiAgICAgICAgPC9wPgogICAgICA8L2xpPgogICAgICA8bGkgY2xhc3M9ImJsb2ctaXRlbSI+CiAgICAgICAgPHAgY2xhc3M9ImFydGljbGUiPgogICAgICAgICAgTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gQXV0CiAgICAgICAgICByZWN1c2FuZGFlIG5vYmlzIHBvcnJvLCBkaWduaXNzaW1vcyByZXByZWhlbmRlcml0IGxhYm9yaW9zYW0gZXQuIE1hZ25pCiAgICAgICAgICBxdW8gbGF1ZGFudGl1bSBwYXJpYXR1ciBuZWNlc3NpdGF0aWJ1cywgbW9sbGl0aWEgaW4gdm9sdXB0YXMKICAgICAgICAgIGNvbnNlcXVhdHVyIGFzcGVybmF0dXIhIEN1cGlkaXRhdGUgYXQgc2VkIHNhcGllbnRlPwogICAgICAgIDwvcD4KICAgICAgPC9saT4KICAgIDwvdWw+CiAgPC9ib2R5Pgo8L2h0bWw+

LmJsb2ctbGlzdCB7CiAgZGlzcGxheTogZmxleDsKICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKICBib3JkZXI6IDFweCBzb2xpZCByZWJlY2NhcHVycGxlOwogIHdpZHRoOiA2NjBweDsKfQoKLmJsb2ctaXRlbSB7CiAgZmxleC1iYXNpczogY2FsYygxMDAlIC8gMyk7CiAgYm9yZGVyOiAxcHggc29saWQgc2FkZGxlYnJvd247CiAgcGFkZGluZzogMTBweCAxNXB4Owp9CgovKiBSZW1vdmUgZGVmYXVsdCBkZWNvcmF0aW9ucyAqLwp1bCB7CiAgbGlzdC1zdHlsZTogbm9uZTsKICBwYWRkaW5nLWxlZnQ6IDA7Cn0=

## flex-grow
Die Eigenschaft `flex-grow` bestimmt die Fähigkeit eines Flex-Items, 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-Items im Vergleich zu anderen Elementen angibt. Zum Beispiel: Wenn ein Element einen `flex-grow`-Wert von `2` hat und ein anderes einen Wert von `1`, wächst das erste Element doppelt so stark wie das zweite, wenn im Flex-Container zusätzlicher Platz vorhanden ist.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDx1bCBjbGFzcz0iYmxvZy1saXN0Ij4KICAgICAgPGxpIGNsYXNzPSJibG9nLWl0ZW0iPgogICAgICAgIDxwIGNsYXNzPSJhcnRpY2xlIj5JdGVtIDE8L3A+CiAgICAgIDwvbGk+CiAgICAgIDxsaSBjbGFzcz0iYmxvZy1pdGVtIj4KICAgICAgICA8cCBjbGFzcz0iYXJ0aWNsZSI+aXRlbSAyPC9wPgogICAgICA8L2xpPgogICAgICA8bGkgY2xhc3M9ImJsb2ctaXRlbSI+CiAgICAgICAgPHAgY2xhc3M9ImFydGljbGUiPkl0ZW0gMzwvcD4KICAgICAgPC9saT4KICAgIDwvdWw+CiAgPC9ib2R5Pgo8L2h0bWw+

LmJsb2ctbGlzdCB7CiAgZGlzcGxheTogZmxleDsKICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKICBib3JkZXI6IDFweCBzb2xpZCByb3N5YnJvd247Cn0KCi5ibG9nLWl0ZW0gewogIGJvcmRlcjogMXB4IHNvbGlkIHZpb2xldDsKICBmbGV4LWdyb3c6IDE7CiAgdGV4dC1hbGlnbjogY2VudGVyOwp9CgouYmxvZy1pdGVtOm50aC1jaGlsZCgyKSB7CiAgZmxleC1ncm93OiAyOwp9CgovKiBSZW1vdmUgZGVmYXVsdCBkZWNvcmF0aW9ucyAqLwp1bCB7CiAgbGlzdC1zdHlsZTogbm9uZTsKICBwYWRkaW5nLWxlZnQ6IDA7Cn0=

## order
Die Eigenschaft `order` wird verwendet, um die Anzeigereihenfolge von Flex-Elementen innerhalb ihres Containers zu definieren. 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 jede 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. Wenn mehrere Elemente denselben `order`-Wert haben, positioniert der Browser sie in der Reihenfolge, in der sie im HTML-Dokument erscheinen. Ordnen wir die `order`-Eigenschaften der Elemente in der folgenden Liste neu an. Die Aufgabe besteht darin, das dritte Element an die erste Position zu setzen.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDx1bCBjbGFzcz0iYmxvZy1saXN0Ij4KICAgICAgPGxpIGNsYXNzPSJibG9nLWl0ZW0iPgogICAgICAgIDxoND5GaXJzdCBpdGVtIGluIHRoZSBodG1sIGRvY3VtZW50PC9oND4KICAgICAgPC9saT4KICAgICAgPGxpIGNsYXNzPSJibG9nLWl0ZW0iPgogICAgICAgIDxoND5TZWNvbmQgaXRlbSBpbiB0aGUgaHRtbCBkb2N1bWVudDwvaDQ+CiAgICAgIDwvbGk+CiAgICAgIDxsaSBjbGFzcz0iYmxvZy1pdGVtIj4KICAgICAgICA8aDQ+VGhpcmQgaXRlbSBpbiB0aGUgaHRtbCBkb2N1bWVudDwvaDQ+CiAgICAgIDwvbGk+CiAgICA8L3VsPgogIDwvYm9keT4KPC9odG1sPg==

LmJsb2ctbGlzdCB7CiAgZGlzcGxheTogZmxleDsKICBmbGV4LWRpcmVjdGlvbjogcm93OwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwogIGJvcmRlcjogMXB4IHNvbGlkIHJvc3licm93bjsKICB3aWR0aDogNTAwcHg7Cn0KCi5ibG9nLWl0ZW0gewogIGJvcmRlcjogMXB4IHNvbGlkIHZpb2xldDsKICBvcmRlcjogNTsKfQoKLmJsb2ctaXRlbTpudGgtY2hpbGQoMykgewogIG9yZGVyOiAxOwp9CgovKiBSZW1vdmUgZGVmYXVsdCBkZWNvcmF0aW9ucyAqLwp1bCB7CiAgbGlzdC1zdHlsZTogbm9uZTsKICBwYWRkaW5nLWxlZnQ6IDA7Cn0=

Was bewirkt die Eigenschaft `flex-basis`?

Beherrschen Sie die Grundlagen von CSS, der Gestaltungssprache, die das Erscheinungsbild von Webseiten verändert. Erforschen Sie zentrale Konzepte wie Textstile, Farben, Abstände, das Box-Modell, Flexbox und dekorative Effekte. Entwickeln Sie die Fähigkeiten, um optisch ansprechende und gut strukturierte Webseiten zu erstellen.

Verstehen, wie CSS mit HTML verbunden wird und wie Stile durch Selektoren angewendet werden. Farben, Textgestaltung und Hover-Effekte zur Steuerung der visuellen Darstellung anwenden.

Verbesserung der Typografie durch Zeilenhöhe, Abstände, Schriftarteigenschaften und benutzerdefinierte Schriftarten. Steuerung von Schriftfamilien, -gewicht, -stil und -größe für eine bessere Lesbarkeit.

Steuerung der Layoutstruktur mit Margin-, Padding-, Border- und Width-Eigenschaften. Verständnis des Box-Sizing-Verhaltens und der Anzeigearten von Elementen wie Block, Inline und Inline-Block.

Steuerung von horizontalen und vertikalen Layouts mit Flexbox-Eigenschaften. Anpassung von Richtung, Ausrichtung und Abstand zur Strukturierung von UI-Komponenten.

Layouts mit Hintergrundfarben, Bildern, Pseudoelementen und Schatten aufwerten. Visuelle Komponenten für Tiefe und Kontrast gestalten.

Arbeiten mit Flex-Elementen

flex-basis

flex-grow

order

1. Was bewirkt die Eigenschaft `flex-grow`?

2. Was bewirkt die Eigenschaft `flex-basis`?