Flexbox

The CSS Podcast – 010: Flexbox

Ein Designmuster, das beim responsiven Design schwierig sein kann, ist eine Seitenleiste, Inhalte. Wenn ein Darstellungsbereich vorhanden ist, dieses Muster gut funktioniert, aber wo der Raum verdichtet wird, dass ein starres Layout problematisch werden kann.

Das Flexible Box Layout Model (Flexbox) ist ein Layoutmodell für eindimensionale Inhalte. Sie eignet sich hervorragend für verschiedene Artikel in verschiedenen Größen, und das beste Layout für diese Elemente zurückzugeben.

Dies ist das ideale Layoutmodell für dieses Seitenleistenmuster. Mit der Flexbox können Sie nicht nur die Seitenleiste und den Inhalt inline anordnen, Falls jedoch nicht genügend Platz vorhanden ist, wird in der Seitenleiste eine neue Zeile eingefügt. Anstatt starre Abmessungen für den Browser festzulegen, mit der Flexbox, kannst du stattdessen flexible Begrenzungen angeben, um zu zeigen, wie der Inhalt angezeigt werden könnte.

Was können Sie mit einem flexiblen Layout tun?

Flexible Layouts bieten folgende Funktionen: die Sie in diesem Leitfaden kennenlernen werden.

• Sie können als Zeile oder Spalte angezeigt werden.
• Sie berücksichtigen den Schreibmodus des Dokuments.
• Sie sind standardmäßig einzeilig, kann aber auf mehrere Zeilen umgebrochen werden.
• Elemente im Layout lassen sich visuell neu anordnen, von ihrer Reihenfolge im DOM entfernt wird.
• Flächen können innerhalb der Elemente verteilt werden, damit sie je nach dem verfügbaren Platz der Eltern größer und kleiner werden.
• Um die Elemente herum können Flächen und Flex-Linien in einem umgebrochenen Layout verteilt werden. mithilfe der Eigenschaften für die Boxausrichtung.
• Die Elemente selbst können an der Querachse ausgerichtet werden.

Die Hauptachse und die Querachse

Der Schlüssel zum Verständnis der Flexbox liegt darin, das Konzept einer Hauptachse und einer Querachse zu verstehen. Die Hauptachse ist die Achse, die in der Eigenschaft flex-direction festgelegt ist. Wenn dies row ist, befindet sich Ihre Hauptachse entlang der Zeile, Bei column liegt die Hauptachse entlang der Spalte.

Flex-Elemente werden als Gruppe auf der Hauptachse verschoben. Denken Sie daran: Wir haben eine Menge Dinge und versuchen, das beste Layout für sie als Gruppe zu finden.

Die Querachse verläuft in der anderen Richtung zur Hauptachse, Wenn flex-direction also row ist, verläuft die Querachse entlang der Spalte.

Auf der Querachse kannst du zwei Dinge tun. Sie können die Elemente einzeln oder als Gruppe verschieben, sodass sie aneinander und an der Container. Wenn Sie umgebrochene Flex-Linien können Sie diese Linien als Gruppe behandeln, um zu steuern, wie der Abstand ihnen zugewiesen wird. In diesem Leitfaden erfahren Sie, wie dies in der Praxis funktioniert. Denken Sie vorerst daran, dass die Hauptachse Ihrer flex-direction folgt.

Flex-Container erstellen

Sehen wir uns an, wie sich die Flexbox verhält, indem wir eine Gruppe von Elementen unterschiedlicher Größe mit der Flexbox legen. entfernen.

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

Zur Verwendung der Flexbox müssen Sie angeben, dass Sie einen Kontext mit flexibler Formatierung und keinen regulären Kontext verwenden möchten Block- und Inline-Layout aus. Ändern Sie dazu den Wert der Eigenschaft display in flex.

.container {
  display: flex;
}

Wie Sie in der Layoutanleitung gelernt haben, erhalten Sie hier ein Feld auf Blockebene. mit untergeordneten Elementen für flexible Elemente. Die Flex-Elemente weisen unter Verwendung ihrer Anfangswerte sofort ein gewisses Flexbox-Verhalten auf.

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

Auch wenn du noch keine flex-direction-Property hinzugefügt hast, Die Elemente werden als Zeile angezeigt, da der Anfangswert von flex-direction row ist. Wenn Sie eine Zeile benötigen, 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 Reihe angeordnet.
• row-reverse:: Die Elemente werden als Zeile vom Ende des flexiblen Containers aus angeordnet.
• column: Die Elemente werden als Spalte dargestellt.
• column-reverse : Die Elemente werden als Spalte vom Ende des flexiblen Containers entfernt.

Sie können alle Werte mit der Gruppe von Elementen in der Demo unten ausprobieren.

Den Fluss von Elementen und die Bedienungshilfen umkehren

Seien Sie vorsichtig, wenn Sie Eigenschaften verwenden, die die visuelle Anzeige neu anordnen. von der Anordnung der Elemente im HTML-Dokument entfernt, da sich dies negativ auf die Barrierefreiheit 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, da die logische Reihenfolge die Reihenfolge ist, die ein Screenreader vorliest. den Inhalt, und alle mit der Tastatur folgen.

Im folgenden Video sehen Sie, wie in einem umgekehrten Zeilenlayout Die Tabulatortaste zwischen Links wird getrennt, wenn die Tastaturnavigation dem DOM und nicht dem visuellen folgt. Display.

Dieses Problem kann durch alles verursacht werden, was die Reihenfolge der Elemente in der Flexbox oder im Raster ändern kann. Daher sollte jede Neuanordnung eine gründliche Prüfung beinhalten, um sicherzustellen, dass Ihre Website nicht schwierig zu nutzen ist.

Weitere Informationen erhalten Sie hier:

• Inhalte neu anordnen
• Verbindung zwischen Flexbox und Tastaturnavigation getrennt

Schreibmodi und Schreibrichtung

Flex-Elemente werden standardmäßig als Zeile dargestellt. Eine Zeile verläuft in der Richtung, in der Sätze im Schreibmodus und in der Skriptrichtung fließen. Wenn Sie also in Arabisch arbeiten, mit der Schreibrichtung von rechts nach links, werden die Elemente auf der rechten Seite angeordnet. Die TAB-Reihenfolge würde auch auf der rechten Seite beginnen, da Sätze so auf Arabisch gelesen werden.

Wenn Sie im vertikalen Schreibmodus arbeiten, wie einigen japanischen Schriftbildern, ist eine Zeile vertikal, von oben nach unten. Versuchen Sie, in dieser Demo, die einen vertikalen Schreibmodus verwendet, die flex-direction zu ändern.

Daher ist das standardmäßige Verhalten von flexiblen Elementen mit dem Schreibmodus des Dokuments verknüpft. Die meisten Anleitungen sind in englischer Sprache von links nach rechts schreiben. In diesem Fall wäre es einfach, davon auszugehen, dass sich flexible Elemente auf der linken Seite befinden und horizontal ausgeführt werden.

Mit der Haupt- und Kreuzachse sowie dem Schreibmodus Die Tatsache, dass wir hier von start und end und nicht von oben, unten, links und rechts sprechen ist die Flexbox vielleicht leichter zu verstehen. Jede Achse hat einen Anfang und ein Ende. Der Anfang der Hauptachse wird als Hauptstart bezeichnet. Unsere flexiblen Elemente richten sich also anfangs vom Hauptanfang aus. Das Ende dieser Achse ist main-end. Der Anfang der Querachse ist Cross-start und das Ende Cross-end.

Flex-Elemente umschließen

Der Anfangswert des Attributs flex-wrap ist nowrap. Das bedeutet, dass die Elemente überlaufen können, wenn im Container nicht genügend Platz ist.

</ph> <ph type="x-smartling-placeholder">

Elemente, die mit den Anfangswerten angezeigt werden, verkleinern sich so klein wie möglich. bis auf die Größe min-content reduziert.

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

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

Wenn ein Flex-Container umschlossen wird, werden mehrere Flex-Zeilen erstellt. In Bezug auf die Raumverteilung fungiert jede Zeile wie ein neuer flexibler Container. Wenn Sie Zeilen brechen, kann etwas in Zeile 2 nicht mit etwas darüber in Zeile 1 übereinstimmen. Das bedeutet, dass die Flexbox eindimensional ist. Sie können die Ausrichtung einer Achse, einer Zeile oder einer Spalte nicht beides zusammen, wie es bei der Rasterung möglich ist.

Die Abkürzung „Flex Flow“

Sie können die Eigenschaften flex-direction und flex-wrap mit der Abkürzung flex-flow festlegen. So setzen Sie beispielsweise flex-direction auf column und erlauben den Textumbruch:

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

Abstand innerhalb von flexiblen Elementen steuern

Wenn der Container mehr Speicherplatz hat, als zum Anzeigen der Elemente erforderlich ist, werden die Elemente zu Beginn auf einer Linie angezeigt, sodass sie den Platz nicht füllen. Sie hören auf, die maximale Inhaltsgröße zu erreichen. Das liegt daran, dass der Anfangswert der flex--Attribute so lautet:

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

Dies kann durch den Keyword-Wert flex: initial dargestellt werden. Die Kurzschreibweise flex-Eigenschaft, oder die Langhandbücher von flex-grow, flex-shrink und flex-basis werden auf die untergeordneten Elemente von Flex-Container.

Damit die Elemente größer werden, Verwenden Sie flex:auto, um großen Elementen mehr Speicherplatz zu gewähren als kleinen. Sie können dies mit der Demo oben ausprobieren. Dadurch werden die Eigenschaften festgelegt auf:

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

Wenn Sie flex: auto verwenden, haben die Artikel unterschiedliche Größen, da der von den Elementen gemeinsam genutzte Raum geteilt wird, nachdem jedes Element als max-content size. Ein großes Element gewinnt also mehr Platz. Um eine einheitliche Größe für alle Elemente zu erzwingen und die Größe der Inhaltsänderung zu ignorieren In der Demo flex:auto auf flex: 1.

Dabei werden folgende Inhalte entpackt:

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

Mit flex: 1 wird besagt, dass alle Elemente die Größe null haben. sodass der gesamte Speicherplatz des flexiblen Containers zum Verteilen verfügbar ist. Da alle Elemente den flex-grow-Faktor 1 haben, wachsen sie alle gleich und der Bereich wird gleichmäßig geteilt.

Elemente mit unterschiedlichem Tempo wachsen lassen

Sie müssen nicht für alle Artikel den flex-grow-Faktor 1 angeben. Sie können Ihren Flex-Elementen andere flex-grow-Faktoren zuweisen. In der Demo unten hat das erste Element flex: 1, das zweite flex: 2 und das dritte flex: 3. Wenn diese Elemente größer werden (0), wird der verfügbare Speicherplatz im Flex-Container auf sechs Elemente gemeinsam genutzt. Dem ersten Element wird ein Teil gegeben, zwei Teile zum zweiten, von drei Teilen bis zum dritten.

Sie können denselben Schritt mit einem flex-basis von auto durchführen, müssen jedoch die drei angeben Werte. Der erste Wert ist flex-grow, das zweite flex-shrink, und das dritte flex-basis.

.item1 {
  flex: 1 1 auto;
}

.item2 {
  flex: 2 1 auto;
}

Dies ist ein seltener Anwendungsfall als Grund für die Verwendung eines flex-basis von auto dem Browser zu erlauben, die Verteilung des Weltraums zu bestimmen. Wenn Sie möchten, dass ein Objekt etwas mehr wächst, als der Algorithmus ermittelt, wie es sein könnte nützlich sind.

Flex-Elemente neu anordnen

Elemente im Flex-Container können mithilfe des Attributs order neu angeordnet werden. Diese Eigenschaft ermöglicht die Sortierung von Elementen in Ordinalgruppen. Die Elemente sind in die von flex-direction vorgegebene Richtung angeordnet, die niedrigsten Werte zuerst. Wenn mehr als ein Element denselben Wert hat, wird es zusammen mit den anderen Elementen mit diesem Wert angezeigt.

Das folgende Beispiel veranschaulicht diese Reihenfolge.

Wissen testen

Testen Sie Ihr Wissen über die Flexbox

Flexbox-Ausrichtung – Übersicht

Flexbox enthielt eine Reihe von Eigenschaften zum Ausrichten von Elementen und zum Verteilen von Raum zwischen Elementen. Diese Eigenschaften waren so nützlich, dass sie seitdem in eine eigene Spezifikation verschoben wurden. gibt es sie auch im Raster-Layout. Hier können Sie herausfinden, wie sie funktionieren, wenn Sie die Flexbox verwenden.

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

• justify-content: Raumverteilung auf der Hauptachse.
• align-content: Raumverteilung auf der Querachse.
• place-content: Kurzschreibweise zum Festlegen der beiden oben genannten Eigenschaften.

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

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

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

Raumverteilung auf der Hauptachse

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

Fügen Sie dem flexiblen Container das Attribut justify-content hinzu. geben Sie ihm den Wert flex-end, Die Elemente befinden sich am Ende des Containers 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, und unter MDN findest du alle möglichen Werten.

Mit flex-direction: column

Wenn du dein flex-direction zu column geändert hast, funktioniert justify-content auch bei in der Spalte. Um freien Platz im Container zu haben, wenn Sie als Spalte arbeiten, müssen Sie ihm einen height oder block-size. Andernfalls haben Sie keinen freien Speicherplatz, den Sie verteilen können.

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

Leerzeichen zwischen den Flex-Linien verteilen

Bei einem umschlossenen Flex-Container haben Sie möglicherweise Platz, um ihn auf der Querachse 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 flexiblen Container das Attribut align-content hinzu, um dieses Standardverhalten zu ändern.

.container {
  align-content: center;
}

Probieren Sie dies in der Demo aus. Das Beispiel enthält umschlossene Zeilen von flexiblen Elementen, Der Container hat ein block-size, damit freier Speicherplatz verfügbar ist.

Die Abkürzung place-content

Wenn du sowohl justify-content als auch align-content festlegen möchtest, kannst du place-content mit einem verwenden oder zwei Werte. Für beide Achsen wird ein einzelner Wert verwendet, wenn Sie sowohl das erste für align-content als auch das zweite 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 Querachse ausrichten

An der Querachse können Sie Ihre Elemente auch mithilfe von align-items innerhalb der flexiblen Linie ausrichten. und align-self. Der für diese Ausrichtung verfügbare Platz hängt von der Höhe des flexiblen Containers ab. oder Flex-Line im Falle eines umschlossenen Satzes von Elementen.

Der Ausgangswert von align-self ist stretch, Aus diesem Grund werden Flex-Elemente in einer Zeile standardmäßig auf die Höhe des höchsten Elements erweitert. Wenn Sie dies ändern möchten, fügen Sie das Attribut align-self jedem Ihrer flexiblen Elemente 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

Eine vollständige Liste der Werte finden Sie auf der MDN-Nummer.

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

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

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

Versuchen Sie in dieser nächsten Demo, den Wert von align-items so zu ändern, dass alle Elemente am Kreuz ausgerichtet werden als Gruppe.

Warum gibt es in der Flexbox kein rechtfertiges Verhalten?

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

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

Es ist erwähnenswert, dass die Flexbox sehr gut mit automatischen Rändern funktioniert. Wenn Sie einen Artikel von einer Gruppe aufteilen möchten, oder die Gruppe in zwei Gruppen aufteilen, Im Beispiel unten hat das letzte Element einen linken Rand von auto. Der automatische Rand nimmt den gesamten Raum in die Richtung ein, in die er angewendet wird. Dies bedeutet, dass das Element nach rechts verschoben wird und so die Gruppen aufgeteilt werden.

Elemente vertikal und horizontal zentrieren

Mithilfe der Ausrichtungseigenschaften kann ein Element in einem anderen Feld zentriert werden. Mit der Eigenschaft justify-content wird das Element an der Hauptachse ausgerichtet. nämlich die Zeile. Die Eigenschaft align-items auf der Querachse.

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

Wissen testen

Testen Sie Ihr Wissen über die Flexbox

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

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

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

Ressourcen

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