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:
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.
![Ein flexibler Container mit neun Elementen. Die Elemente wurden verkleinert, sodass ein Wort auf einer Zeile steht.
aber es ist nicht genug Platz vorhanden, um sie nebeneinander anzuzeigen, sodass die flexiblen Elemente außerhalb des
des Behälters.](https://web.dev/static/learn/css/flexbox/image/a-flex-container-nine-it-e0d8b646b8c9c.jpg?authuser=1&hl=de)
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 ihrflex-basis
werden.flex-basis: auto
: Artikel haben eine Basisgröße vonauto
.
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 ihreflex-basis
.flex-shrink: 1
: Elemente können kleiner als ihreflex-basis
werden.flex-basis: auto
: Artikel haben eine Basisgröße vonauto
.
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 ihreflex-basis
.flex-shrink: 1
: Elemente können kleiner als ihreflex-basis
werden.flex-basis: 0
: Artikel haben eine Basisgröße von0
.
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
Der Standardwert für flex-direction
ist
row
column
Standardmäßig umschließt ein Flex-Container untergeordnete Elemente.
flex-wrap: wrap
mit display: flex
verwenden, um untergeordnete Elemente zu umschließenEin untergeordnetes flexibles Element scheint gequetscht zu sein. Mit welcher Flex-Property können Sie dieses Problem beheben?
flex-grow
flex-shrink
flex-basis
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; }
Zur vertikalen Ausrichtung an der Flexbox verwenden Sie
.container { display: flex; direction: ltr; }
Zur horizontalen Ausrichtung an der Flexbox verwenden Sie
.container { display: flex; direction: ltr; }
Standardmäßig werden Flex-Elemente auf stretch
ausgerichtet. Wenn du Inhalte sehen möchtest
Welchen der folgenden Stile würden Sie für untergeordnete Elemente verwenden?
justify-content: flex-start
align-content: start
content
werden die Flex-Zeilen ausgerichtet, nicht die untergeordneten Elemente.height: auto
align-items: flex-start
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