Flex

Mit display-Werkzeugen können Sie jedes Element in einen Flexbox-Container verwandeln, der direkte Kindelemente in Flex-Items verwandelt. Mit Hilfe zusätzlicher Flex-Eigenschaftswerkzeuge können Sie deren Interaktion noch weiter anpassen.

Sie können auch Flex-Werkzeuge anpassen, die auf verschiedenen Haltepunkten basieren.

Standardmäßig wendet d-flex flex-direction: row an und kann generell weggelassen werden. Es kann jedoch Situationen geben, in denen Sie diese explizit definieren müssen.

Die Utility-Klassen flex-column und flex-column-reverse können verwendet werden, um die Ausrichtung des Flexbox-Containers zu ändern. Beachten Sie, dass IE11 und Safari Probleme mit der Spaltenrichtung haben können.

Es gibt auch responsive Variationen für flex-direction.

Die Flex-Einstellung justify-content kann mit Hilfe den 'flex justify'-Klassen geändert werden. Dies ändert standardmäßig die Flexbox-Elemente auf der x-Achse aber wird umgekehrt, wenn flex-direction: column genutzt wird und dann die y-Achse ändert. Wählen Sie aus start (Browser Standard), end, center, between oder around.

Es gibt auch responsive Variationen für justify-content.

Die Flex-Einstellung align-items kann mit den Flex-Ausrichtungsklassen geändert werden. Dies ändert standardmäßig die Flexbox-Elemente auf der y-Achse aber wird mit flex-direction: column ungekehrt und dann die x-Achse ändert. Wählen Sie aus start, end, center, baseline oder stretch (Browser Standard).

Es gibt auch responsive Variationen für align-items.

Die Flex Einstellung align-self kann mit den Flex align-self Klassen geändert werden. Dies ändert standardmäßig die Flexbox-Elemente auf der x-Achse aber wird mit flex-direction: column umgekehrt und ändert dann die y-Achse. Wählen Sie aus start, end, center, baseline, auto oder stretch (Browser-Standard).

Es gibt auch responsive Variationen für align-self-items.

Mit der Verwendung der 'margin helper'-Klassen in einem Flexbox Container, können Sie die Positionierung von Flex Items auf der x-Achse oder y-Achse steuern, wenn Sie flex-row oder flex-column verwenden.

Durch das Vermischen von flex-direction: column und align-items, können Sie .mt-auto und .mb-auto Hilfsklassen verwenden, um die Flex Item Positionierung anzupassen.

Standardmäßig bietet .d-flex keine Verpackung (verhält sich ähnlich zu flex-wrap: nowrap). Dies kann geändert werden, indem 'flex-wrap helper'-Klassen im Format flex-{condition} angewendet werden, bei denen die Bedingung nowrap, wrap oder wrap-reverse sein kann.

Diese Hilfsklassen können auch im Format flex-{breakpoint}-{condition} angewendet werden, um responsive Variationen basierend auf Brechpunkten zu erstellen. Folgende Kombinationen sind verfügbar:

Sie können die visuelle Reihenfolge der Flex-Elemente mit den 'order'-Utilities ändern.

Es gibt auch responsive Variationen für order.

Die Flex-Einstellung align-content kann über die flex align-content Klassen geändert werden. Dies ändert standardmäßig die Flexbox-Elemente auf der x-Achse aber wird umgekehrt, wenn flex-direction: column, die y-Achse ändert. Wählen Sie aus start (Browser Standard), end, center, between, around oder stretch.

Es gibt auch responsive Variationen für align-content.

Vuetify hat Hilfsklassen für die manuelle Anwendung von grow und shrink. Diese können angewendet werden, indem die Hilfsklasse im Format flex-{condition}-{value} hinzugefügt wird, wobei {condition} entweder grow oder shrink sein kann und {value} entweder 0 oder 1 sein kann. Die Bedingung grow erlaubt ein Element zu wachsen um verfügbaren Platz zu füllen während shrink es einem Element erlauben wird, nur auf den Platzbedarf für seinen Inhalt zu schrumpfen. Dies geschieht jedoch nur, wenn das Element auf seinen Behälter schrumpfen muss, wie z.B. ein Behälter die Größe verkleinern oder von einem flex-grow-1 ausgeführt wird. Der Wert 0 verhindert das Auftreten der Bedingung, während 1 die Bedingung zulässt. Die folgenden Klassen sind verfügbar:

Diese Hilfsklassen können auch im Format flex-{breakpoint}-{condition}-{state} angewendet werden, um responsive Variationen basierend auf Breakpoints zu erstellen. Folgende Kombinationen sind verfügbar: