Bootstrap Flexbox

Bootstrap Flexbox ist ein sehr nutzliches Werzeug zum einstellen des Verwalten der Position der Elemente in einem Container und zum effizienteren Verteilen des Raums zwischen diesen.

Telweise sind auch Kompinationen einzelner Klassen möglich, zum Beispiel um Elemente mittig zu zentrieren kombiniert man einfach die Flexboxeigenschaften justify-content-center und align-item-center.
Flexbox Container
Flex item 1
Flex item 2
Flex item 3

Flex-Box aktivieren

Um einen Flexbox-Container zu erstellen nutzen wir einfach die Klasse d-flex, alle direkt untergeordnete Elemente werden dadurch zu Flex-Elemente (Flex-Items). Nun haben wir die Möglichkeit Flexcontainer und -Items mit zusätzlichen Flex-Eigenschaften weiter modifizieren. Durch die Klasse p-2 erhalten alle Elemente ein Padding von 0.5em (8px) und wurde nur zu Darstellungszecken verwendet.

Ich bin ein Flexbox-Container!
Html-Code
 <div class="d-flex p-2 ">Ich bin ein Flexbox-Container!</div> 

Flex-Direction

Sie legen die Richtung von Flex-Elementen in einem Flex-Container mit Richtungsdienstprogrammen fest. In den meisten Fällen können Sie die horizontale Klasse hier weglassen, da die Standardeinstellung des Browsers row ist. Es kann jedoch vorkommen, dass Sie diesen Wert explizit festlegen müssen (z. B. bei reaktionsschnellen Layouts).

Verwenden Sie .flex-row , um eine horizontale Richtung .flex-row (Standardeinstellung des Browsers), oder .flex-row-reverse , um die horizontale Richtung von der gegenüberliegenden Seite aus zu starten.

Beispiel
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Html-Code
<div class="d-flex flex-row"> 
    <div class="p-2">Flex item 1</div>
    <div class="p-2">Flex item 2</div>
    <div class="p-2">Flex item 3</div>
</div> 
<div class="d-flex flex-row-reverse">
    <div class="p-2">Flex item 1</div> 
    <div class="p-2">Flex item 2</div> 
    <div class="p-2">Flex item 3</div> 
</div>
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Html-Code
<div class="d-flex flex-column">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

Responsive Varianten für flex-direction

Justify content

Zum Ausrichten kann justify-content für Flexbox-Container verwendet werden, um die Ausrichtung von Flexelementen auf der Hauptachse zu ändern (die X-Achse zum Starten, die Y-Achse, wenn flex-direction: column ). Sie können zwischen start (Standardeinstellung des Browsers), end , center , between oder around wählen.

Beispiel

justify-content-start

Flex item 1
Flex item 2
Flex item 3

justify-content-end

Flex item 1
Flex item 2
Flex item 3

justify-content-center

Flex item 1
Flex item 2
Flex item 3

justify-content-between

Flex item 1
Flex item 2
Flex item 3

justify-content-around

Flex item 1
Flex item 2
Flex item 3
Html-Code
<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>

Responsive Variationen für justify-content

Elemente ausrichten

Zum Ausrichten von align-items in Flexbox-Containern auf der Y-Achse. Möglich sind start , end , center, baseline oder stretch (Standardeinstellung des Browsers).

Beispiel

align-items-start

Flex item
Flex item
Flex item

align-items-end

Flex item
Flex item
Flex item

align-items-center

Flex item
Flex item
Flex item

align-items-baseline

Flex item
Flex item
Flex item

align-items-stretch

Flex item
Flex item
Flex item
Html-Code
<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>

Align self

Sie können align-self für Flexbox-Elemente verwenden um deren Ausrichtung auf der y-Achse individuell zu ändern. Wählen Sie zu diesem Zweck die gleichen Optionen wie für align-items : start, end, center, baseline oder stretch (Standardeinstellung des Browsers).

Beispiel

Flex item
Aligned flex item
Flex item
Flex item
Aligned flex item
Flex item
Flex item
Aligned flex item
Flex item
Flex item
Aligned flex item
Flex item
Flex item
Aligned flex item
Flex item
Html-Code
<div class="d-flex">
    <div class="p-2">Flex item 3</div>
    <div class="align-self-start">Aligned flex item</div>
    <div class="align-self-end">Aligned flex item</div>
    <div class="align-self-center">Aligned flex item</div>
    <div class="align-self-baseline">Aligned flex item</div>
    <div class="align-self-stretch">Aligned flex item</div>
    <div class="p-2">Flex item 3</div>
</div>

Responsive Variationen für align-self

Flex-fill

Die flex-fill Klasse ist für eine Reihe von Geschwisterelementen (sibling elements), um sie in die gleiche Breite zu zwingen und gleichzeitig den gesamten verfügbaren horizontalen Raum zu nutzen

Beispiel
Flex item
Flex item
Flex item
Html-Code
<div class="d-flex">
   <div class="flex-fill">Flex item</div>
   <div class="flex-fill">Flex item</div>
   <div class="flex-fill">Flex item</div>
</div>

Responsive Variationen für flex-fill

Grow und shrink (Wachsen und schrumpfen)

Mit .flex-grow-* wird der verfügbaren Platz ausgefüllt. Im folgenden Beispiel nutzen die .flex-grow-1 Elemente den verfügbaren Platz, während die verbleibenden zwei Flex-Elemente den erforderlichen Speicherplatz haben.

Beispiel
Flex-grow-1 item
Flex-Item
Flex-Item
Html-Code
<div class="d-flex">
    <div class="flex-grow-1 text-center">Flex-grow-1 item</div>
    <div class="p-2">Flex-Item</div>
    <div class="p-2">Flex-Item</div>
</div>

Auf der anderen Seite kann .flex-shrink-* verwendet werden, um die Fähigkeit eines Flex-Elements bei Bedarf zu schrumpfen anzuwenden. Im folgenden Beispiel muss der Inhalt des zweiten Flex-Element mit .flex-shrink-1 in eine neue Zeile um mehr Platz für das vorherige Flex-Element mit .w-100 (Width 100%) zu machen.

Beispiel
Flex item
Flex item