Flexbox

The CSS Podcast – 010: Flexbox

Ein Designmuster, das beim responsiven Design schwierig sein kann, ist eine Seitenleiste, die sich in bestimmte Inhalte einfügt. Bei einem verfügbaren Darstellungsbereich funktioniert dieses Muster großartig, aber bei geringerem Platz kann dieses starre Layout problematisch werden.

Das Flexible Box Layout Model (Flexbox) ist ein Layoutmodell, das für eindimensionale Inhalte entwickelt wurde. Es ist hervorragend geeignet, um eine Reihe von Elementen unterschiedlicher Größe zu erfassen und das beste Layout für diese Elemente zurückzugeben.

Dies ist das ideale Layoutmodell für dieses Seitenleistenmuster. Flexbox sorgt nicht nur dafür, dass die Seitenleiste und der Inhalt inline positioniert werden, sondern auch, wenn nicht genügend Platz übrig ist, wird die Seitenleiste auf einer neuen Zeile aufgebrochen. Anstatt starre Abmessungen für den Browser festzulegen, kannst du mit Flexbox flexible Begrenzungen angeben, die darauf hinweisen, wie der Inhalt angezeigt werden könnte.

Was können Sie mit einem flexiblen Layout tun?

Flex-Layouts bieten die folgenden Funktionen, die Sie in diesem Leitfaden erkunden können.

• Sie können als Zeile oder Spalte angezeigt werden.
• Sie berücksichtigen den Schreibmodus des Dokuments.
• Standardmäßig sind sie einzeilig, können aber aufgefordert werden, in mehrere Zeilen zu fließen.
• Elemente im Layout können visuell neu angepasst werden, nicht in ihrer Reihenfolge im DOM.
• Der Platz kann innerhalb der Elemente verteilt werden. Er wird also entsprechend dem verfügbaren Platz in der übergeordneten Datei größer und kleiner.
• Mithilfe der Eigenschaften der Box-Ausrichtung kann der Platz um die Elemente verteilt und die Linien in einem umschlossenen Layout geformt werden.
• Die Elemente selbst können an der Kreuzachse ausgerichtet werden.

Die Hauptachse und die Kreuzachse

Der Schlüssel zum Verständnis der Flexbox besteht darin, das Konzept der Hauptachse und der Kreuzachse zu verstehen. Die Hauptachse wird von der flex-direction-Property festgelegt. Wenn dieser Wert row ist, befindet sich Ihre Hauptachse entlang der Zeile, bei column befindet sich die Hauptachse entlang der Spalte.

Flexibel bewegen sich als Gruppe auf der Hauptachse. Vergiss nicht: Wir haben eine Menge Dinge und wir versuchen, das beste Layout für die Gruppe zu finden.

Die Kreuzachse verläuft in der anderen Richtung zur Hauptachse, d. h., wenn flex-direction auf row gesetzt ist, verläuft die Querachse entlang der Spalte.

Auf der Kreuzachse haben Sie zwei Möglichkeiten. Sie können die Elemente einzeln oder als Gruppe verschieben, damit sie aneinander und am flexiblen Container ausgerichtet werden. Wenn Sie umgebrochene Flex-Linien haben, können Sie diese als Gruppe behandeln, um zu steuern, wie Raum diesen Linien zugewiesen wird. In diesem Leitfaden erfahren Sie, wie dies in der Praxis funktioniert. Denken Sie vorerst daran, dass die Hauptachse Ihrem flex-direction folgt.

Flex-Container erstellen

Sehen wir uns an, wie sich die Flexbox verhält, indem wir eine Gruppe unterschiedlicher Elemente mithilfe von Flexbox anordnen.

<div class="container" id="container">
  <div>One</div>
  <div>Item two</div>
  <div>The item we will refer to as three</div>
</div>

Um Flexbox zu verwenden, müssen Sie angeben, dass Sie einen Flex-Formatierungskontext und kein reguläres Block- und Inline-Layout verwenden möchten. Ändern Sie dazu den Wert des Attributs display in flex.

.container {
  display: flex;
}

Wie Sie im Layoutleitfaden gelernt haben, erhalten Sie dadurch ein Feld auf Blockebene mit untergeordneten Flex-Elementen. Die Flex-Elemente zeigen sofort ein Flexbox-Verhalten, wobei ihre Anfangswerte verwendet werden.

Die Anfangswerte bedeuten Folgendes:

• Die Elemente werden als Zeile angezeigt.
• Sie werden nicht umgebrochen.
• Sie wachsen nicht, um den Behälter zu füllen.
• Sie befinden sich am Anfang des Containers.

Richtung von Elementen steuern

Obwohl Sie noch kein flex-direction-Attribut hinzugefügt haben, werden die Elemente als Zeile angezeigt, da der Anfangswert von flex-direction row ist. Wenn Sie eine Zeile verwenden möchten, müssen Sie die Eigenschaft nicht hinzufügen. Um die Richtung zu ändern, fügen Sie die Eigenschaft und einen der vier Werte hinzu:

• row: Die Elemente werden als Zeile angeordnet.
• row-reverse:: Die Elemente sind als Zeile vom Ende des Flex-Containers aus angeordnet.
• column: Die Elemente werden als Spalte angeordnet.
• column-reverse : Die Elemente werden als Spalte vom Ende des Flex-Containers aus angeordnet.

Sie können alle Werte mit der Artikelgruppe in der Demo unten ausprobieren.

Fluss von Elementen und Barrierefreiheit umkehren

Sie sollten vorsichtig sein, wenn Sie Eigenschaften verwenden, die die visuelle Anzeige anders anordnen, als die Elemente im HTML-Dokument angeordnet sind, da sich dies negativ auf die Zugänglichkeit auswirken kann. Die Werte row-reverse und column-reverse sind ein gutes Beispiel dafür. Die Neuanordnung erfolgt nur für die visuelle Reihenfolge, nicht für die logische Reihenfolge. Dies ist wichtig zu verstehen, da die logische Reihenfolge die Reihenfolge ist, in der ein Screenreader den Inhalt vorliest, und jeder, der über die Tastatur navigiert, folgt.

Im folgenden Video sehen Sie, wie bei einem umgekehrten Zeilenlayout die Verbindung mit der Tabulatortaste zwischen Links getrennt wird, da die Tastaturnavigation dem DOM und nicht der visuellen Anzeige folgt.

Alles, was die Reihenfolge der Elemente in der Flexbox oder im Raster ändern kann, kann dieses Problem verursachen. Daher sollte eine Neuanordnung gründliche Tests beinhalten, um sicherzustellen, dass die Nutzung Ihrer Website für manche Nutzer nicht schwierig wird.

Weitere Informationen erhalten Sie hier:

• Neuanordnen von Inhalten
• Flexbox und die Tastaturnavigation trennen

Schreibmodi und -richtungen

Flex-Elemente werden standardmäßig in einer Zeile angeordnet. Eine Zeile läuft in der Richtung, in der die Sätze in Ihrem Schreibmodus und in der Skriptrichtung fließen. Wenn Sie also auf Arabisch mit linksläufiger Schriftrichtung (rtl) arbeiten, werden die Elemente auf der rechten Seite angeordnet. Die TAB-Reihenfolge beginnt ebenfalls rechts, da so die Sätze im Arabischen gelesen werden.

Wenn Sie mit einem vertikalen Schreibmodus wie einigen japanischen Schriftbildern arbeiten, wird eine Zeile vertikal von oben nach unten ausgeführt. Versuche, die flex-direction in dieser Demo mit einem vertikalen Schreibmodus zu ändern.

Daher hängt das standardmäßige Verhalten von Flex-Elementen mit dem Schreibmodus des Dokuments zusammen. Die meisten Anleitungen werden in Englisch oder einem anderen horizontalen, von links nach rechts geschriebenen Modus geschrieben. So lässt sich leicht davon ausgehen, dass flexible Elemente auf der linken Seite ausgerichtet und horizontal ausgeführt werden.

Mit der Haupt- und Kreuzachse plus dem zu berücksichtigenden Schreibmodus ist es vielleicht einfacher zu verstehen, dass wir in der Flexbox über start und end statt über oben, unten, links und rechts sprechen. Jede Achse hat einen Anfang und ein Ende. Der Anfang der Hauptachse wird als Hauptstart bezeichnet. Unsere Flex-Elemente sind also anfangs vom Hauptstart aus ausgerichtet. Das Ende dieser Achse ist main-end. Der Anfang der Kreuzachse ist cross-start und das Ende cross-end.

Flexible Elemente werden zusammengefasst

Der Anfangswert der Eigenschaft flex-wrap ist nowrap. Das bedeutet, dass die Elemente überlaufen, wenn im Container nicht genügend Platz vorhanden ist.

Elemente, die mit den Anfangswerten angezeigt werden, werden vor dem Überlauf so klein wie möglich auf die Größe min-content reduziert.

Fügen Sie dem Flex-Container flex-wrap: wrap hinzu, damit die Elemente umschlossen werden.

.container {
  display: flex;
  flex-wrap: wrap;
}

Wenn ein Flex-Container einen Wrapping findet, werden mehrere flexible Linien erstellt. In Bezug auf die Raumverteilung fungiert jede Zeile wie ein neuer Flex-Container. Wenn Sie also Zeilen umbrechen, ist es nicht möglich, etwas in Zeile 2 so zu erhalten, dass es mit etwas darüber in Zeile 1 übereinstimmt. Dies bedeutet, dass die Flexbox eindimensional ist. Sie können die Ausrichtung in einer Achse, in einer Zeile oder in einer Spalte steuern, nicht beide zusammen, wie das im Raster möglich ist.

Das Flex-Flow-Kürzel

Sie können die Eigenschaften flex-direction und flex-wrap mit der Kurzschreibweise flex-flow festlegen. So legen Sie beispielsweise flex-direction auf column fest und lassen zu, dass Elemente umschlossen werden:

.container {
  display: flex;
  flex-flow: column wrap;
}

Speicherplatz in Flex-Elementen steuern

Angenommen, unser Container hat mehr Platz, als zum Anzeigen der Elemente erforderlich ist, werden die Elemente am Anfang angeordnet und nicht größer, um den Platz zu füllen. Sie hören auf, ihre maximale Inhaltsgröße erreicht zu haben. Das liegt daran, dass der Anfangswert der flex--Attribute so lautet:

• flex-grow: 0: Elemente wachsen nicht.
• flex-shrink: 1: Elemente können kleiner als ihr flex-basis sein.
• flex-basis: auto: Elemente haben eine Basisgröße von auto.

Dies kann durch den Keyword-Wert flex: initial dargestellt werden. Das Kurzattribut flex oder die Langschrift von flex-grow, flex-shrink und flex-basis werden auf die untergeordneten Elemente des Flex-Containers angewendet.

Wenn Sie möchten, dass die Elemente größer werden und große Elemente mehr Speicherplatz haben als kleine, verwenden Sie flex:auto. Sie können dies mit der Demo oben ausprobieren. Dadurch werden die Attribute auf Folgendes festgelegt:

• flex-grow: 1: Elemente können größer als flex-basis werden.
• flex-shrink: 1: Elemente können kleiner als ihr flex-basis-Wert gemacht werden.
• flex-basis: auto: Elemente haben eine Basisgröße von auto.

Wenn Sie flex: auto verwenden, haben Elemente am Ende unterschiedliche Größen, da der von den Elementen gemeinsam genutzte Speicherplatz nach der Festlegung der maximalen Inhaltsgröße für die einzelnen Elemente freigegeben wird. Ein großes Objekt erhält also mehr Platz. Wenn Sie erzwingen möchten, dass alle Elemente eine einheitliche Größe haben und die Größe des Inhalts ignoriert werden soll, ändern Sie in der Demo flex:auto zu flex: 1.

Damit wird Folgendes entpackt:

• flex-grow: 1: Elemente können größer als flex-basis werden.
• flex-shrink: 1: Elemente können kleiner als ihr flex-basis-Wert gemacht werden.
• flex-basis: 0: Elemente haben eine Basisgröße von 0.

Mit flex: 1 wird angegeben, dass alle Elemente die Größe null haben. Daher kann der gesamte Speicherplatz im Flex-Container verteilt werden. Da alle Elemente den flex-grow-Faktor 1 haben, wachsen sie alle gleich und der Speicherplatz wird gleichmäßig geteilt.

Zulassen, dass Artikel mit unterschiedlichen Raten wachsen

Sie müssen nicht für alle Elemente den flex-grow-Faktor von 1 festlegen. Sie können Ihren flexiblen Elementen verschiedene flex-grow-Faktoren zuweisen. In der Demo unten enthält das erste Element flex: 1, das zweite flex: 2 und das dritte flex: 3. Wenn diese Elemente ab 0 anwachsen, wird der verfügbare Speicherplatz im Flex-Container auf sechs geteilt. dem ersten Element, zwei Teilen dem zweiten und drei Teilen dem dritten.

Dasselbe erreichen Sie mit einem flex-basis von auto, müssen aber die drei Werte angeben. Der erste Wert ist flex-grow, der zweite flex-shrink und der dritte flex-basis.

.item1 {
  flex: 1 1 auto;
}

.item2 {
  flex: 2 1 auto;
}

Dies ist ein seltener Anwendungsfall, da der Grund für die Verwendung eines flex-basis von auto darin besteht, dem Browser zu ermöglichen, die Speicherverteilung zu ermitteln. Wenn ein Element etwas stärker wachsen soll, als vom Algorithmus festgelegt wurde, kann dies hilfreich sein.

Flex-Elemente neu anordnen

Elemente im Flex-Container können mithilfe des Attributs order neu angeordnet werden. Mit dieser Eigenschaft können Elemente in Ordinalgruppen sortiert werden. Die Elemente werden in der von flex-direction vorgegebenen Richtung angeordnet, die niedrigsten Werte zuerst. Wenn mehrere Elemente denselben Wert haben, wird er zusammen mit den anderen Elementen mit diesem Wert angezeigt.

Das folgende Beispiel veranschaulicht diese Reihenfolge.

Überprüfen Sie Ihr Wissen

Testen Sie Ihr Wissen über Flexbox

Flexbox-Ausrichtung – Übersicht

Flexbox verfügte über eine Reihe von Eigenschaften zum Ausrichten von Elementen und Verteilen von Raum zwischen Elementen. Diese Eigenschaften waren so nützlich, dass sie seitdem in ihre eigene Spezifikation verschoben wurden, dass Sie sie auch im Grid-Layout finden. Hier erfahren Sie, wie sie bei der Verwendung der Flexbox funktionieren.

Die Eigenschaften können in zwei Gruppen unterteilt werden. Eigenschaften für die Raumverteilung und Eigenschaften für die Ausrichtung. Die Eigenschaften, die Speicherplatz verteilen, sind:

• justify-content: Abstandsverteilung auf der Hauptachse.
• align-content: Abstandsverteilung auf der Kreuzachse.
• place-content: eine Kurzschreibweise zum Festlegen der beiden oben genannten Properties.

Die für die Ausrichtung in der Flexbox verwendeten Eigenschaften:

• align-self: Richtet ein einzelnes Element an der Kreuzachse aus.
• align-items: Richtet alle Elemente als Gruppe an der Kreuzachse aus.

Wenn Sie an der Hauptachse arbeiten, beginnen die Eigenschaften mit justify-. Auf der Kreuzachse beginnen sie mit align-.

Verteilen Sie den Abstand auf der Hauptachse

Bei dem zuvor verwendeten HTML-Code sind die flexiblen Elemente als Zeile angeordnet und auf der Hauptachse ist Platz. Die Elemente sind nicht groß genug, um den Flex-Container vollständig zu füllen. Die Elemente werden am Anfang des Flex-Containers ausgerichtet, da der Anfangswert von justify-content flex-start ist. Die Elemente befinden sich am Anfang, zusätzliche Leerzeichen am Ende.

Fügen Sie dem Flex-Container das Attribut justify-content hinzu und weisen Sie ihm den Wert flex-end zu. Die Elemente werden dann am Ende des Containers ausgerichtet und der freie Platz wird am Anfang platziert.

.container {
  display: flex;
  justify-content: flex-end;
}

Sie können den Abstand zwischen den Elementen auch mit justify-content: space-between verteilen.

Probieren Sie einige der Werte in der Demo aus. Die vollständigen möglichen Werte finden Sie in der MDN.

Mit flex-direction: column

Wenn Sie flex-direction in column geändert haben, funktioniert justify-content für die Spalte. Damit in Ihrem Container bei der Arbeit als Spalte genügend Platz vorhanden ist, müssen Sie dem Container ein height oder block-size zuweisen. Sonst hast du keinen freien Platz, den du verteilen kannst.

Probieren Sie die verschiedenen Werte aus, diesmal mit einem Flexbox-Spaltenlayout.

Abstand zwischen flexiblen Linien verteilen

Bei einem umschlossenen Flex-Container haben Sie möglicherweise Platz, um ihn auf der Kreuzachse zu verteilen. In diesem Fall können Sie das Attribut align-content mit denselben Werten wie justify-content verwenden. Im Gegensatz zu justify-content, bei dem Elemente standardmäßig an flex-start ausgerichtet werden, ist der Anfangswert von align-content stretch. Fügen Sie dem Flex-Container das Attribut align-content hinzu, um dieses Standardverhalten zu ändern.

.container {
  align-content: center;
}

Probieren Sie das in der Demo aus. Das Beispiel enthält umschlossene Zeilen mit flexiblen Elementen und der Container hat eine block-size, damit freier Platz bleibt.

Die Abkürzung place-content

Um sowohl justify-content als auch align-content festzulegen, können Sie place-content mit einem oder zwei Werten verwenden. Für beide Achsen wird ein einzelner Wert verwendet. Wenn Sie sowohl den ersten Wert für align-content als auch den zweiten Wert für justify-content angeben,

.container {
  place-content: space-between;
  /* sets both to space-between */
}

.container {
  place-content: center flex-end;
  /* wrapped lines on the cross axis are centered,
  on the main axis items are aligned to the end of the flex container */
}

Elemente an der Kreuzachse ausrichten

Auf der Kreuzachse können Sie Ihre Elemente auch mithilfe von align-items und align-self innerhalb der flexiblen Linie ausrichten. Der verfügbare Platz für diese Ausrichtung hängt von der Höhe des flexiblen Containers bzw. der flexiblen Linie bei einem umschlossenen Satz von Elementen ab.

Der Anfangswert von align-self ist stretch. Deshalb werden die Flex-Elemente einer Zeile standardmäßig auf die Höhe des höchsten Elements erweitert. Wenn Sie dies ändern möchten, fügen Sie einem Ihrer flexiblen Elemente das Attribut align-self hinzu.

.container {
  display: flex;
}

.item1 {
  align-self: flex-start;
}

Verwenden Sie einen der folgenden Werte, um das Element auszurichten:

• flex-start
• flex-end
• center
• stretch
• baseline

Vollständige Liste der MDN-Werte

Die nächste Demo enthält eine einzelne Zeile mit flexiblen Elementen mit flex-direction: row. Das letzte Element definiert die Höhe des Flex-Containers. Das erste Element hat die Eigenschaft align-self mit dem Wert flex-start. Ändern Sie den Wert dieser Eigenschaft, um zu sehen, wie sie sich innerhalb ihres Raums auf der Kreuzachse verschiebt.

Die Eigenschaft align-self wird auf einzelne Elemente angewendet. Das Attribut align-items kann auf den Flex-Container angewendet werden, um alle einzelnen align-self-Attribute als Gruppe festzulegen.

.container {
  display: flex;
  align-items: flex-start;
}

Versuchen Sie in dieser nächsten Demo, den Wert von align-items zu ändern, um alle Elemente als Gruppe an der Kreuzachse auszurichten.

Warum gibt es keine Blockierregel in der Flexbox?

Flex-Elemente dienen als Gruppe auf der Hauptachse. Es gibt also kein Konzept, ein einzelnes Element aus dieser Gruppe aufzuteilen.

Im Rasterlayout wirken die Eigenschaften justify-self und justify-items an der Inline-Achse, um die Ausrichtung von Elementen auf dieser Achse innerhalb ihres Rasterbereichs vorzunehmen. Aufgrund der Art und Weise, wie Elemente bei flexiblen Layouts als Gruppe behandelt werden, werden diese Eigenschaften nicht in einem flexiblen Kontext implementiert.

Es lohnt sich zu wissen, dass die Flexbox mit automatischen Rändern sehr gut funktioniert. Wenn Sie ein Element von einer Gruppe aufteilen oder die Gruppe in zwei Gruppen aufteilen müssen, können Sie dazu eine Marge anwenden. Im Beispiel unten hat das letzte Element einen linken Rand von auto. Der automatische Rand nimmt den gesamten Raum in der Richtung ein, in der er angewendet wird. Das bedeutet, dass das Element nach rechts verschoben wird, wodurch die Gruppen aufgeteilt werden.

Elemente vertikal und horizontal zentrieren

Mithilfe der Ausrichtungseigenschaften können Sie ein Element in einem anderen Rahmen zentrieren. Mit der Eigenschaft justify-content wird das Element an der Hauptachse, also der Zeile, ausgerichtet. Die Eigenschaft align-items auf der Kreuzachse.

.container {
  width: 400px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

Überprüfen Sie Ihr Wissen

Testen Sie Ihr Wissen über Flexbox

.container {
  display: flex;
  direction: ltr;
}

.container {
  display: flex;
  direction: ltr;
}

.container {
  display: flex;
  direction: ltr;
}

Ressourcen

• MDN CSS Flexible Box Layout enthält eine Reihe detaillierter Leitfäden mit Beispielen.
• CSS-Tricks-Leitfaden für Flexbox
• Was passiert, wenn Sie einen Flexbox-Flex-Container erstellen?
• Alles, was Sie über die Ausrichtung in Flexbox wissen müssen
• Wie groß ist die flexible Box?
• Anwendungsfälle für Flexbox
• CSS-Flexbox-Layouts in den Chrome-Entwicklertools prüfen und debuggen