Flexbox

Jedes Element kann ein Flex-Container sein. Flex-Container sind hilfreiche Tools zum Erstellen von Webseiten, die auf Änderungen der Bildschirmgröße reagieren. Untergeordnete Elemente von Flex-Containern ändern ihre Größe und Position ihres übergeordneten Containers.

Damit ein Element zu einem Flex-Container wird, muss seine Anzeigeeigenschaft auf Flex gesetzt sein.

In der vorherigen Übung haben wir vielleicht bemerkt, dass, als wir einem div - einem Element auf Blockebene - den display Wert flex gaben, es ein Element auf Blockebene blieb. Was ist, wenn wir möchten, dass mehrere Flex-Container inline miteinander angezeigt werden?

Wenn wir nicht wollen, dass div-Elemente, Elemente auf Blockebene sind, würden wir display: inline; verwenden. Flexbox stellt jedoch den inline-flex Wert für die Display-Eigenschaft bereit, der es uns ermöglicht, Flex-Container zu erstellen, die auch Inline Elemente sind.

Im obigen Beispiel gibt es zwei Container-Divs. Ohne eine Breite würde jedes Div die gesamte Breite der Seite ausdehnen. Die Absätze innerhalb jedes Divs würden auch übereinander angezeigt, da es sich bei Absätzen um Elemente auf Blockebene handelt.

Wenn wir den Wert der Anzeigeeigenschaft in inline-flex ändern, werden die Divs inline zueinander angezeigt, wenn die Seite breit genug ist. Im Verlauf dieser Lektion werden wir detaillierter darauf eingehen, wie flexible Elemente anzeigt werden.

Beachten wir, dass im obigen Beispiel die Größe des Flex-Containers festgelegt ist. Derzeit überschreibt die Größe des übergeordneten Containers die Größe seiner untergeordneten Elemente. Wenn das übergeordnete Element zu klein ist, werden die flexiblen Elemente verkleinert, um sie an die Größe des übergeordneten Containers anzupassen. Warum das so ist, schauen wir uns in einer späteren Übung an.

Als wir in früheren Übungen den display Wert der übergeordneten Container in flex oder inline-flex geändert haben, wurden alle untergeordneten Elemente (Flex-Elemente) in Richtung der oberen linken Ecke des übergeordneten Containers verschoben. Dies ist das Standardverhalten von Flex-Containern und ihren untergeordneten Elementen. Wir können angeben, wie sich Flex-Elemente entlang der Hauptachse von links nach rechts ausbreiten. In einer späteren Übung erfahren wir mehr über Achsen.

Um die Elemente von links nach rechts zu positionieren, verwenden wir eine Eigenschaft namens justify-content.

Im obigen Beispiel setzen wir den Wert von justify-content auf flex-end. Dadurch werden alle Flex-Elemente auf die rechte Seite des Flex-Containers verschoben.

Nachfolgend sind fünf häufig verwendete Werte für die Eigenschaft "justify-content" aufgeführt:

• flex-start - Alle Elemente werden der Reihe nach positioniert, beginnend links vom übergeordneten Container, ohne zusätzlichen Abstand zwischen oder vor ihnen.

• flex-end - Alle Elemente werden der Reihe nach positioniert, wobei das letze Element auf der rechten Seite des übergeordneten Containers beginnt und kein zusätzlicher Abstand zwischen oder nach ihnen besteht.

• center - Alle Elemente werden der Reihe nach in der Mitte des übergeordneten Containers positioniert, ohne zusätzlichen Platz davor, dazwischen oder danach.

• space-around - Elemente werden mit gleichem Abstand vor und nach jedem Element positioniert, was zu einem doppelten Abstand zwischen den Elementen führt.

• space-between - Elemente werden mit gleichem Abstand zwischen ihnen positioniert, jedoch ohne zusätzlichen Abstand vor dem ersten oder nach den letzen Elementen.

In den obigen Definitionen bedeutet "kein zusätzlicher Leerraum", dass die äußeren Abstände zu nebenliegenden Elementen (margins) und die äußeren Ränder des Elements (borders) beachtet werden, aber zwischen den Elementen nicht mehr Leerraum (als in der Stilregel für das jeweilige Element angegeben) hinzugefügt wird. Die Größe jedes einzelnen Flex-Elements wird durch diese Eigenschaft nicht verändert.

In der vorherigen Übung haben wir gelernt, wie wir den Inhalt eines Flex-Containers von links nach rechts auf der Seite ausrichten. Es ist auch möglich, Flex-Artikel vertikal innerhalb des Containers auszurichten. Die Eigenschaft align-items ermöglicht es, Flex-Elemente vertikal anzuordnen.

Im obigen Beispiel ist die Eigenschaft align-items auf "baseline" gesetzt, Dies bedeutet, dass die Grundlinie des Inhalts jedes Elements ausgerichtet wird.

Nachfolgend sind fünf häufig verwendete Werte für die Eigenschaft align-items aufgeführt:

• flex-start - Alle Elemente werden oben im übergeordneten Container positioniert.

• flex-end - Alle Elemente werden am unteren Rand des übergeordneten Containers positioniert.

• center - Die Mitte aller Elemente wird auf halbem Weg zwischen der Ober- und Unterseite des übergeordneten Containers positioniert.

• baseline - Am unteren Rand wird der Inhalt aller Elemente aneinander ausgerichtet.

• stretch - Wenn möglich, werden die Elemente vom oberen zum unteren Rand des Containers gestreckt (dies ist der Standardwert, Elemente mit einer angegebenen Höhe werden nicht gestreckt, Elemente mit einer minimalen Höhe oder kleiner angegebenen Höhe werden gestreckt).

Diese fünf Werte sagen den Elementen, wie sie sich entlang der Querachse des übergeordneten Containers verhalten sollen. In diesen Beispielen erstreckt sich die Querachse von der Ober- bis zur Unterseite des Containers. Wir werden in einer zukünftigen Übung mehr darüber erfahren.

Möglicherweise sind wir mit den Eigenschaften min-height und max-height, min-width und max-width nicht vertraut, die sicherstellen, dass ein Element mindestens eine bestimmte Größe oder höchstens eine bestimmte Größe hat. Wir werden sehen, wie nützlich diese im Verlauf dieser Lektion werden. 

Jetzt werden wir jeden der fünf oben genannten Werte in Aktion sehen!

In der Übung Inline-Flex haben wir gelernt, dass alle Flex-Elemente proportional schrumpfen, wenn der Flex-Container zu klein ist. Wenn der übergeordnete Container jedoch größer als nötig ist, werden die Flex-Elemente standardmäßig nicht gedehnt. Mit der flex-grow Eigenschaft können wir festlegen, ob Elemente wachsen sollen, um einen Container zu füllen, und auch, welche Elemente proportional mehr oder weniger wachsen sollen als andere.

So wie die Eigenschaft flex-grow, flexible Elemente proportional streckt, kann die Eigenschaft flex-shrink verwendet werden, um anzugeben, welche Elemente in welchen Proportionen verkleinert werden.

Möglicherweise ist uns in früheren Übungen aufgefallen, dass Flex-Elemente schrumpfen, wenn der Flex-Container zu klein war, obwohl wir die Eigenschaft nicht deklariert hatten. Dies liegt daran, dass der Standardwert von flex-shrink 1 ist. Flex-Elemente wachsen jedoch nicht, es sei denn, die Eigenschaft flex-grow wird deklariert, da der Standardwert von flex-grow 0 ist.

In den beiden vorherigen Übungen wurden die Abmessungen der Divs durch die mit CSS festgelegten Höhen und Breiten bestimmt. Eine andere Möglichkeit zur Festlegung der Breite eines Flex-Elements ist mit der flex-basis Eigenschaft. Flex-basis ermöglicht uns, die Breite eines Elements anzugeben, bevor es gedehnt oder verkleinert wird.

Die Kurzschrift-Eigenschaft flex bietet eine bequeme Möglichkeit, anzugeben, wie Elemente gedehnt und verkleinert werden, und vereinfacht gleichzeitig das erforderliche CSS. Mit der Flex-Eigenschaft können wir flex-grow, flex-shrink und flex-basis in einer Zeile deklarieren.

Hinweis: Die Flex-Eigenschaft unterscheidet sich vom Flex-Wert, der für die Display-Eigenschaft verwendet wird.

Im obigen Beispiel wachsen alle Elemente mit der Klasse "groß" doppelt so stark wie Elemente mit der Klasse "klein". Bedenken wir, dass dies nicht bedeutet, dass große Elemente doppelt so groß sind wie kleine Elemente, sondern dass sie nur mehr zusätzlichen Platz beanspruchen.

Das folgende CSS deklariert diese drei Eigenschaften in einer Zeile:

Im obigen Beispiel verwenden wir die Eigenschaft flex um die Werte für flex-grow, flex-shrink und flex-basis (in dieser Reihenfolge) alle in einer Zeile zu deklarieren.

Im obigen Beispiel verwenden wir die Flex-Eigenschaft, um flex-grow und flex-shrink zu deklarieren, aber nicht flex-basis.

Manchmal möchten wir nicht, dass unser Inhalt verkleinert wird, um in den Container zu passen. Stattdessen möchten wir, dass Flex-Elemente bei Bedarf in die nächste Zeile verschoben werden. Dies kann mit der Eigenschaft flex-wrap deklariert werden.

Die flex-wrap Eigenschaft kann drei Werte annehmen:

1. wrap - Untergeordnete Elemente eines Flex-Containers, die nicht in eine Zeile passen, werden in die nächste Zeile verschoben

2. wrap-reverse - Dieselbe Funktionalität wie wrap, aber die Reihenfolge der Zeilen innerhalb eines Flex-Containers ist umgekehrt (z.B. wird in einer zweireihigen Flexbox die erste Zeile aus einem wrap-Container zur zweiten in umgekehrter Reihenfolge und die zweite Zeile aus dem wrap-Container zur ersten in umgekehrter Reihenfolge)

3. nowrap - verhindert das Umbrechen von Elementen. Dies ist der Standardwert und ist nur erforderlich, um einen durch eine andere CSS-Regel festgelegten Umbruchwert zu überschreiben.

Manchmal möchten wir nicht, dass unsere Inhalte verkleinert werden, damit sie in den Container passen. Stattdessen möchten wir möglicherweise, dass flexible Elemente bei Bedarf in die nächste Zeile verschoben werden. Dies kann mit der Flex-Eigenschaft deklariert werden. 

Die Eigenschaft align-items kann drei werte annehmen:

Align-Items dient zum Ausrichten von Elementen innerhalb einer einzelnen Zeile. Wenn ein Flex-Container über mehrere Inhaltszeilen verfügt, können wir align-content verwenden, um die Zeilen von oben nach unten anzuordnen.

Nachfolgend sind einige der am häufigsten verwendeten align-content Werte aufgeführt:

• flex-start - Alle Elementreihen werden oben im übergeordneten Container ohne zusätzlichen Abstand dazwischen positioniert.

• flex-end - Alle Elementreihen werden am unteren Rand des übergeordneten Containers ohne zusätzlichen Abstand dazwischen positioniert.

• center - Alle Elementreihen werden in der Mitte des übergeordneten Elements ohne zusätzlichen Abstand dazwischen positioniert.

• space-between - Alle Elementreihen werden gleichmäßig von der Ober- bis zur Unterseite des Containers verteilt, ohne dass über der ersten oder unter der letzen Platz ist.

• space-around - Alle Elementreihen werden in gleichmäßigen Abständen von der Ober- bis zur Unterseite des Containers angeordnet, mit dem gleichen Abstand oben und unten sowie zwischen den einzelnen Elementen.

• stretch - Wenn eine Mindesthöhe oder keine Höhe angegeben ist, werden die Elementreihen so gestreckt, dass sie den übergeordneten Container von oben nach unten ausfüllen (Standardwert).

Bisher haben wir nur flexible Artikel behandelt, die sich horizontal dehnen und schrumpfen und vertikal wickeln lassen. Wie bereits erwähnt, haben Flex-Container zwei Achsen: eine Hauptachse und eine Querachse. Standardmäßig ist die Hauptachse horizontal und die Querachse vertikal.

Die Hauptachse dient zur Positionierung von Flex-Elementen mit folgenden Eigenschaften:

1. justify-content 

2. flex-wrap 

3. flex-grow 

4. flex-shrink 

Die Querachse dient zur Positionierung von Flex-Elementen mit folgenden Eigenschaften:

1. align-items 

2. align-content 

Hauptachse und Querachse sind austauschbar. Wir können sie mit der flex-direction Eigenschaft wechseln. Wenn wir die Eigenschaft "flex-direction" hinzufügen und ihr den Wert "column" (Spalte) zuweisen, werden die Flex-Elemente vertikal und nicht horizontal angeordnet.

Wie die Kurzschrift Eigenschaft flex wird auch die Kurzform-Eigenschaft flex-flow verwendet, um sowohl die Eigenschaft flex-wrap als auch flex-direction in einer Zeile zu deklarieren.

Im obigen Beispiel verwenden wir zwei Zeilen, um das zu erreichen, was auch mit einer Zeile erreicht werden kann.

Bisher hatten wir mehrere Flex-Container auf derselben Seite, um die Positionierung von Flex-Elementen zu untersuchen. Es ist auch möglich, Flex-Container ineinander zu positionieren.