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:
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.
![Ein Flex-Container mit neun Elementen darin, die verkleinert wurden, sodass sich ein Wort auf einer Zeile befindet, aber nicht genügend Platz ist, um sie nebeneinander anzuzeigen, sodass sich die Flex-Elemente außerhalb des Containers erweitert haben.](https://web.developers.google.cn/static/learn/css/flexbox/image/a-flex-container-nine-it-e0d8b646b8c9c.jpg?authuser=6&hl=de)
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 ihrflex-basis
sein.flex-basis: auto
: Elemente haben eine Basisgröße vonauto
.
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 alsflex-basis
werden.flex-shrink: 1
: Elemente können kleiner als ihrflex-basis
-Wert gemacht werden.flex-basis: auto
: Elemente haben eine Basisgröße vonauto
.
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 alsflex-basis
werden.flex-shrink: 1
: Elemente können kleiner als ihrflex-basis
-Wert gemacht werden.flex-basis: 0
: Elemente haben eine Basisgröße von0
.
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
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 packenEin untergeordnetes Flex-Element erscheint zusammengedrängt. Mit welcher Flex-Eigenschaft lässt sich dies verhindern?
flex-grow
flex-shrink
flex-basis
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; }
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; }
Flexibel sind standardmäßig auf stretch
ausgerichtet. Sie möchten die Inhaltsgröße für untergeordnete Elemente verwenden. Welchen der folgenden Stile verwenden Sie?
justify-content: flex-start
align-content: start
content
werden flexible Linien und keine untergeordnete Elemente ausgerichtet.height: auto
align-items: flex-start
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