So verwenden Sie Flex, um Ihre Website reaktionsschneller zu machen

Moderne Website-Designs müssen auf Änderungen des Inhalts oder der Browsergröße reagieren. Sie können dies mit Vanilla-CSS, Medienabfragen oder Flexbox erreichen.

Bestimmte Flex-Eigenschaften wie Flex-Wrap oder Flex-Grow können die Größe oder Position eines Elements auf optisch ansprechende Weise verändern. In diesem Artikel werden Beispiele erläutert, wie Sie die Eigenschaften „Flex-Grow“, „Flex-Shrink“, „Flex-Wrap“, „Flex-Flow“ und „Order Flex“ verwenden können.

So richten Sie CSS Flex Display ein

Wenn Sie nicht vertraut sind mit die Grundlagen der Flexbox, können Sie dies erkunden CodePen-Schnipsel. Es enthält Beispielcode für ein einfaches Flexbox-Setup. Zuerst müssen Sie die untergeordneten Elemente unter einem übergeordneten Div oder "Flex-Container" einschließen.

<div-Klasse="Elternteil">
<div-Klasse="untergeordnetes Element"></div>
<div-Klasse="untergeordnetes Element"></div>
<div-Klasse="untergeordnetes Element"></div>
</div>

Ergänzen Sie die Anzeige: flex Eigentum an die übergeordnete div.

.Elternteil {
 Anzeige: Flex;
}

Wie man Gegenstände in einem Container anbaut

Das Flex-Wachstum -Eigenschaft können die untergeordneten Elemente erweitert werden, um den verfügbaren Platz in ihrem übergeordneten div auszufüllen. Mit dieser Eigenschaft können Sie das "Verhältnis" des Platzes angeben, den jedes Box-Element einnehmen kann.

Um Flex-Grow hinzuzufügen, fügen Sie die Flex-Grow-CSS-Eigenschaft zu jedem der untergeordneten Elemente hinzu.

<div-Klasse="Elternteil">
<div-Stil="Hintergrundfarbe: rot; Flex-Grow: 1"></div>
<div-Stil="Hintergrundfarbe: orange; Flex-Grow: 1"></div>
<div-Stil="Hintergrundfarbe: gelb; Flex-Grow: 1"></div>
<div-Stil="Hintergrundfarbe: grün; Flex-Grow: 3"></div>
<div-Stil="Hintergrundfarbe: blau; Flex-Grow: 1"></div>
</div>

.Elternteil {
 Breite: 500px;
 Anzeige: Flex; 
}

Ein Flex-Grow von 0 für jedes Element bedeutet, dass die Boxen nicht erweitert werden, um den Platz ihrer Eltern zu füllen. 0 ist der Standardwert für diese Eigenschaft.

Ein Flex-Grow von 1 für jedes Element zwingt alle Boxen, sich gleichmäßig auszudehnen, um den verfügbaren Platz innerhalb des Elternteils auszufüllen.

Wenn einer der Artikel einen größeren Flex Grow hatte, zum Beispiel:

<div-Stil="Hintergrundfarbe: grün; Flex-Grow: 3"></div>

Die grüne Box versucht, bis zu dreimal so viel Platz zu gewinnen wie die anderen Boxen.

Sehen Sie sich den Code für die Flex-Grow-Eigenschaft in diesem an CodePen-Schnipsel um ein funktionierendes Beispiel zu sehen.

So verkleinern Sie Elemente in einem Container

In einigen Fällen kann die Breite des übergeordneten Elements schrumpfen und die Elemente im übergeordneten Element passen nicht mehr hinein. Du kannst den... benutzen Flex-Schrumpf -Eigenschaft, um die Größe der Boxen zu verkleinern. Auf diese Weise können sie im übergeordneten Element enthalten bleiben.

Mit Flex-Shrink können Sie ein Verhältnis angeben, um wie viel jedes Element schrumpfen soll.

Fügen Sie den untergeordneten div-Elementen die Eigenschaft flex-shrink hinzu. Ändern Sie die Breite des übergeordneten und untergeordneten Objekts, sodass die Elemente nicht in den Container passen.

<div-Klasse="Elternteil">
<div-Stil="Hintergrundfarbe: rot; Flexschrumpf: 1"></div>
<div-Stil="Hintergrundfarbe: orange; Flexschrumpf: 1"></div>
<div-Stil="Hintergrundfarbe: gelb; Flexschrumpf: 1"></div>
<div-Stil="Hintergrundfarbe: grün; Flex-Schrumpf: 2"></div>
<div-Stil="Hintergrundfarbe: blau; Flexschrumpf: 1"></div>
</div>

.Elternteil {
 Breite: 500px;
 Anzeige: Flex; 
}
.Elternteil div {
 Breite: 150px;
 Höhe: 150px;
}

Ein Flex-Shrink von 1 für alle Artikel bedeutet, dass alle Artikel gleichermaßen schrumpfen, wenn die Breite des übergeordneten Artikels reduziert wird.

Wenn einer der Artikel einen größeren Flex-Shrink hat, zum Beispiel:

<div-Stil="Hintergrundfarbe: grün; Flex-Schrumpf: 2"></div>

Das grüne Kästchen versucht, doppelt so stark zu schrumpfen wie die anderen Kästchen.

Sehen Sie sich den Code für die Flex-Shrink-Eigenschaft in diesem an CodePen-Schnipsel um ein funktionierendes Beispiel zu sehen.

So verschieben Sie Elemente in die nächste Zeile

Das Flex-Wrap -Eigenschaft können Sie Elemente in die nächste Zeile verschieben, wenn sie nicht in die Breite des übergeordneten Containers passen. Hier schrumpfen die Elemente nicht und Sie können die Höhe und Breite der Elemente beibehalten.

Zu den Optionen für die Flex-Wrap-Eigenschaft gehören:

Flexfolie: nowrap | wickeln | Wrap-Rückseite

Fügen Sie dem übergeordneten Flex-Container die Flex-Wrap-Eigenschaft hinzu. Stellen Sie sicher, dass die Breite des Containers klein genug ist, damit die untergeordneten Elemente darin nicht hineinpassen. Dadurch werden alle überlaufenden Elemente in eine neue Zeile gezwungen.

<div-Klasse="Elternteil">
<div-Klasse="rot"></div>
<div-Klasse="Orange"></div>
<div-Klasse="gelb"></div>
<div-Klasse="grün"></div>
<div-Klasse="blau"></div>
</div>

.Elternteil {
 Breite: 300px;
 Rand: 1px durchgehend schwarz;
 Anzeige: Flex;
 Flex-Wrap: Wrap;
}
.Elternteil div {
 Breite: 100px;
 Höhe: 100px;
}

Der Wrap-Wert positioniert die Elemente beginnend oben rechts im Container. Der Wrap-Reverse-Wert positioniert die Elemente so, dass sie unten rechts im Container beginnen. Beim Umbrechen der Elemente werden die Elemente in einer neuen Zeile nach oben statt nach unten verschoben.

Wenn Sie für den übergeordneten Container eine Höhe angeben, fügt der Container einen Abstand zwischen den Elementzeilen hinzu.

Wenn Sie diesen Abstand entfernen, aber die Höhe des übergeordneten div beibehalten möchten, verwenden Sie die Eigenschaft align-content. Geben Sie die Eigenschaft align-content als „flex-start“ im übergeordneten div an:

.Elternteil { 
 Breite: 300px; 
 Höhe: 300px;
 Rand: 1px durchgehend schwarz; 
 Anzeige: Flex;
 Flex-Wrap: Wrap; 
 Ausrichtungsinhalt: flex-Anfang;
}

Die Eigenschaft align-content ist einer von mehreren Kernen Flexbox-Eigenschaften, mit denen Sie die Ausrichtung steuern können.

Sehen Sie sich den Code für die Flex-Wrap-Eigenschaft in diesem an CodePen-Schnipsel um einige Beispiele zu sehen.

So verschieben Sie Elemente in die nächste Spalte

Wenn Sie ein anderes Layout (z. B. eine Spalte) verwenden und die Elemente dennoch umbrechen müssen, können Sie die verwenden Flex-Flow Eigentum. Diese Flex-Eigenschaft ist eine Kombination der Flex-Wrap- und Flex-Direction-Eigenschaften.

Beispieloptionskombinationen, die Sie für die Flex-Flow-Eigenschaft verwenden können, sind:

Flex-Wrap: Reihe nowrap | Spalte nowrap | Zeilenumbruch | Spaltenumbruch | Zeilenumbruch-umgekehrt | Spaltenumbruch-umgekehrt

Diese Eigenschaft funktioniert ähnlich wie die Flex-Wrap-Eigenschaft oben. Flex-Flow zum übergeordneten Flex-Container hinzufügen. Stellen Sie sicher, dass die Breite des übergeordneten Containers klein genug ist, um das Umschließen der untergeordneten Elemente zu erzwingen:

.Elternteil {
 Breite: 300px; 
 Rand: 1px durchgehend schwarz; 
 Anzeige: Flex; 
 Flex-Flow: Spaltenumbruch;
}
.Elternteil div {
 Breite: 100px;
 Höhe: 100px;
}

Die Elemente werden in der angegebenen Richtung umgebrochen (Zeile oder Spalte).

Sehen Sie sich den Code für die Flex-Flow-Eigenschaft in diesem an CodePen-Schnipsel um einige Beispiele zu sehen.

So ändern Sie die Reihenfolge der Elemente

Wenn Sie die Elemente auf der Seite aufgrund dynamischer Daten neu anordnen mussten, können Sie die verwenden Befehl Flex-Eigenschaft. Mit dieser Eigenschaft können Sie die Reihenfolge angeben, in der jedes Element angezeigt wird.

Die Zahlen müssen nicht zwingend bei 1 beginnen. Sie können beliebige Zahlen und Intervalle verwenden, und die order-Eigenschaft ordnet die HTML-Elemente vom niedrigsten zum höchsten.

Fügen Sie die Order-Eigenschaft zu jedem der Elemente im übergeordneten Flex-Container hinzu:

<div-Klasse="Elternteil">
<div-Klasse="rot" Stil="Reihenfolge: 2"></div>
<div-Klasse="Orange" Stil="Reihenfolge: 1"></div>
<div-Klasse="gelb" Stil="Reihenfolge: 5"></div>
<div-Klasse="grün" Stil="Reihenfolge: 4"></div>
<div-Klasse="blau" Stil="Reihenfolge: 3"></div>
</div>

In diesem Fall befindet sich das orange Kästchen ganz rechts, gefolgt von den roten, blauen, grünen und dann gelben Kästchen.

Sehen Sie sich den Code für die Order-Eigenschaft in diesem an CodePen-Schnipsel um einige Beispiele zu sehen.

Experimentieren Sie mit mehr CSS-Eigenschaften auf Ihrer Website

Sie können diese Flex-Eigenschaften verwenden, um Ihre Website reaktionsschneller zu machen. Dazu gehört die Verwendung der Eigenschaften Flex-Grow, Flex-Shrink, Flex-Wrap, Flex-Flow und Order-Flex.

Sie können sich auch über weitere Flex-Eigenschaften informieren, die Ihnen helfen, die HTML-Elemente auf Ihrer Website auszurichten.

So verwenden Sie Flex zum Ausrichten von HTML-Elementen

Lesen Sie weiter

Über den Autor