Bootstrap - Flex: Ein umfassender Leitfaden für Anfänger

Hallo da draußen, angehende Webentwickler! Ich freue mich sehr, Ihr Guide auf dieser aufregenden Reise in die Welt von Bootstraps Flex-System zu sein. Als jemand, der seit Jahren Informatik unterrichtet, kann ich Ihnen versichern, dass das Beherrschen von Flex ein echter Game-Changer in Ihrem Webdesign-Werkzeugkasten sein wird. Also tauchen wir ein und lüften gemeinsam die Geheimnisse von Flex!

Was ist Bootstrap Flex?

Bevor wir unsere Coding-Muskeln spielen lassen (im übertragenen Sinne!), lassen Sie uns verstehen, worum es bei Bootstrap Flex geht. Flex ist ein leistungsstarkes Layout-System in Bootstrap, das es Ihnen ermöglicht, flexible und responsive Designs mit Leichtigkeit zu erstellen. Es ist wie eine magische Zauberstab, der Ihre Webelemente so anordnet, wie Sie es möchten!

Flex-Verhaltensweisen aktivieren

Um Flex zu verwenden, müssen wir es zunächst aktivieren. Das ist wie das Anmachen des Lichtschalters, bevor Sie in einem dunklen Raum sehen können. So machen Sie es:

<div class="d-flex">
  <!-- Ihre Flex-Elemente kommen hier hinein -->
</div>

Diese einfache d-flex-Klasse verwandelt Ihren Container in einen Flex-Container. Alles innerhalb dieses Containers wird jetzt zu einem Flex-Element. Cool, oder?

Richtung

Nun, da wir Flex aktiviert haben, sprechen wir über die Richtung. In der Flex-Welt können Sie Ihre Elemente horizontal oder vertikal anordnen. Das ist wie die Wahl zwischen einem Bücherregal (vertikal) und einem Förderband (horizontal).

<div class="d-flex flex-row">
  <div>Element 1</div>
  <div>Element 2</div>
  <div>Element 3</div>
</div>

<div class="d-flex flex-column">
  <div>Element 1</div>
  <div>Element 2</div>
  <div>Element 3</div>
</div>

In diesem Beispiel ordnet flex-row Elemente horizontal (von links nach rechts) an, während flex-column sie vertikal (von oben nach unten) stapelt.

Inhalte ausrichten

Inhalte ausrichten in Flex ist wie das Anordnen von Büchern auf einem Regal. Sie können sie zur linken, rechten, mittleren oder gleichmäßigen Verteilung schieben. Sehen wir uns das an:

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

Jede dieser Klassen verteilt die Flex-Elemente unterschiedlich entlang der Hauptachse. Probieren Sie sie aus, um das zauberhafte Ergebnis zu sehen!

Elemente ausrichten

Während justify-content entlang der Hauptachse wirkt, beschäftigt sich align-items mit der Querneigung. Denken Sie daran als das Anpassen der Höhe von Büchern auf einem Regal. So verwenden Sie es:

<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>

Diese Klassen helfen Ihnen, wie Flex-Elemente vertikal innerhalb eines Flex-Containers ausgerichtet werden.

Einzeles Element ausrichten

Manchmal möchten Sie, dass ein Element aus der Reihe tanzt und anders ausgerichtet wird. Da kommt align-self ins Spiel:

<div class="d-flex">
  <div class="align-self-start">Start</div>
  <div class="align-self-center">Mitte</div>
  <div class="align-self-end">Ende</div>
</div>

Das ermöglicht einzelnen Flex-Elementen eine andere Ausrichtung als ihre Geschwister.

Füllen

Die flex-fill-Klasse ist wie ein Schwamm - sie lässt ein Flex-Element alle verfügbaren Räume aufnehmen:

<div class="d-flex">
  <div class="flex-fill">Flex-Element mit viel Inhalt</div>
  <div class="flex-fill">Flex-Element</div>
  <div class="flex-fill">Flex-Element</div>
</div>

Alle Elemente mit flex-fill haben gleiche Breite, unabhängig von ihrem Inhalt.

Wachsen und Schrumpfen

Die Eigenschaften Wachsen und Schrumpfen kontrollieren, wie Flex-Elemente expandieren oder kontrahieren. Es ist wie das Have von Gummibändern in Ihrem Layout:

<div class="d-flex">
  <div class="flex-grow-1">Wachsen</div>
  <div>Fest</div>
  <div class="flex-shrink-1">Schrumpfen</div>
</div>

Das flex-grow-1-Element wird zum Auffüllen des verfügbaren Raums wachsen, während flex-shrink-1 sich bei Bedarf zusammenzieht.

Automatische Außenabstände

Automatische Außenabstände in Flex sind wie magische Abstandshalter. Sie schieben Flex-Elemente voneinander weg:

<div class="d-flex">
  <div class="mr-auto">Links</div>
  <div>Mitte</div>
  <div class="ml-auto">Rechts</div>
</div>

Dies erstellt eine linke-zentrale-rechte Anordnung mit automatischem Abstand.

Umbruch

Wenn Sie zu viele Elemente haben, um sie in eine Zeile zu passen, kommt flex-wrap zur Rettung:

<div class="d-flex flex-wrap">
  <div>Element 1</div>
  <div>Element 2</div>
  <div>Element 3</div>
  <div>Element 4</div>
  <div>Element 5</div>
</div>

Dies ermöglicht es den Elementen, zur nächsten Zeile zu umzubrechen, wenn sie den Platz erschöpfen.

Reihenfolge

Die order-Eigenschaft ermöglicht es Ihnen, Flex-Elemente ohne Änderung Ihres HTML neu anzuordnen. Es ist wie eine Fernbedienung für Ihr Layout:

<div class="d-flex">
  <div class="order-3">Erst im DOM, zuletzt im Layout</div>
  <div class="order-2">Zweit im DOM, zweit im Layout</div>
  <div class="order-1">Dritt im DOM, erst im Layout</div>
</div>

Inhalte ausrichten

Wenn Sie mehrere Zeilen von Flex-Elementen haben, hilft align-content, wie diese Zeilen verteilt werden:

<div class="d-flex flex-wrap align-content-start" style="height: 200px;">
  <div>Element</div>
  <div>Element</div>
  ...
</div>

Dies kann besonders nützlich sein für die Erstellung von rasterartigen Layouts.

Medienobjekt

Schließlich schauen wir uns ein praktisches Beispiel an - das Medienobjekt. Es ist ein gängiges Muster im Webdesign, und Flex macht es super einfach:

<div class="d-flex">
  <div class="flex-shrink-0">
    <img src="..." alt="...">
  </div>
  <div class="flex-grow-1 ms-3">
    Dies ist einige Inhalte aus einem Medienkomponenten. Sie können dies durch jeden Inhalt ersetzen und ihn nach Bedarf anpassen.
  </div>
</div>

Dies erstellt ein flexibles Medienobjekt mit einem Bild links und Inhalt rechts.

Und das war's! Sie haben gerade Ihre ersten Schritte im Bootstrap Flex-System gemacht. Denken Sie daran, Übung macht den Meister, also Scheuen Sie sich nicht, mit diesen Eigenschaften zu experimentieren. Bereit werden Sie in kürzester Zeit flexible, responsive Layouts wie ein Profi erstellen!

Hier ist eine Tabelle, die alle Flex-Eigenschaften zusammenfasst, die wir besprochen haben:

Eigenschaft	Beschreibung	Beispiel-Klassen
Flex aktivieren	Macht Container zu Flex-Container	d-flex
Richtung	Setzt Hauptachse von Flex-Container	flex-row, flex-column
Inhalte ausrichten	Ausrichten von Elementen entlang Hauptachse	justify-content-start, justify-content-end, justify-content-center, justify-content-between, justify-content-around
Elemente ausrichten	Ausrichten von Elementen entlang Querneigung	align-items-start, align-items-end, align-items-center, align-items-baseline, align-items-stretch
Einzeles Element ausrichten	Ausrichten eines einzelnen Elements	align-self-start, align-self-center, align-self-end
Füllen	Element nimmt verfügbaren Raum auf	flex-fill
Wachsen	Element kann wachsen	flex-grow-1
Schrumpfen	Element kann schrumpfen	flex-shrink-1
Automatische Außenabstände	Erzeugt Abstand zwischen Elementen	mr-auto, ml-auto
Umbruch	Elemente können zur nächsten Zeile umbrechen	flex-wrap
Reihenfolge	Ändert die Reihenfolge der Elemente	order-1, order-2, etc.
Inhalte ausrichten	Ausrichten von Flex-Zeilen	align-content-start, align-content-end, etc.

Viel Spaß beim Flexen, zukünftige Webdesign-Superstars!

Credits: Image by storyset