Flex-Layout-Syntax-Tutorial

Webseiten-Layout ist eine Schlüsselanwendung von CSS.

Die traditionelle Lösung für das Layout basiert aufdem Box-Modell, wobei sie sich aufdisplay verlässtEigenschaft +positionEigenschaft +floatEigenschaften. Das ist für spezielle Layouts sehr unpraktisch, wie z. B.,vertikale Zentrierungwas nicht einfach zu erreichen ist.

Im Jahr 2009 schlug das W3C eine neue Lösung vor – das Flex-Layout –, mit der sich verschiedene Seitenlayouts einfach, vollständig und responsiv umsetzen lassen. Derzeit wird es von allen Browsern unterstützt, was bedeutet, dass Sie diese Funktion jetzt bedenkenlos verwenden können.

Das Flex-Layout wird in Zukunft die bevorzugte Lösung für Layouts werden. Dieser Artikel führt in die Syntax des Flex-Layouts ein.

Der folgende Inhalt bezieht sich hauptsächlich auf diese beiden Artikel:Ein vollständiger Leitfaden zu FlexboxundEin visueller Leitfaden zu CSS3-Flexbox-Eigenschaften。

1. Was ist das Flex-Layout?

Flex ist die Abkürzung für Flexible Box, was "flexibles Layout" bedeutet, und wird verwendet, um maximale Flexibilität für das Box-Modell bereitzustellen.

Jeder Container kann als Flex-Layout festgelegt werden.

.box{
  display: flex;
}

Inline-Elemente können ebenfalls das Flex-Layout verwenden.

.box{
  display: inline-flex;
}

Browser mit Webkit-Kernel müssen das Präfix -webkit hinzufügen.

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

Beachten Sie, dass nach dem Festlegen des Flex-Layouts die Eigenschaften float, clear und vertical-align von untergeordneten Elementen ungültig werden.

2. Grundlegende Konzepte

Elemente, die das Flex-Layout übernehmen, werden Flex-Container (flex container) genannt, abgekürzt als "container". Alle ihre Kindelemente werden automatisch zu Mitgliedern des Containers, genannt Flex-Items (flex item), abgekürzt als "item".

Standardmäßig hat der Container zwei Achsen: die horizontale Hauptachse (main axis) und die vertikale Querachse (cross axis). Die Startposition der Hauptachse (der Schnittpunkt mit dem Rand) wird main start genannt, und die Endposition wird main end genannt; die Startposition der Querachse wird cross start genannt, und die Endposition wird cross end genannt.

Items werden standardmäßig entlang der Hauptachse angeordnet. Der von einem einzelnen Item belegte Raum auf der Hauptachse wird main size genannt, und der belegte Raum auf der Querachse wird cross size genannt.

3. Eigenschaften des Containers

Die folgenden 6 Eigenschaften werden für den Container festgelegt.

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

3.1 flex-direction-Eigenschaft

Die Eigenschaft flex-direction bestimmt die Richtung der Hauptachse (d. h. die Richtung, in der die Items angeordnet werden).

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

Sie kann 4 Werte annehmen.

row (Standard): Die Hauptachse ist horizontal und beginnt links.

row-reverse: Die Hauptachse ist horizontal und beginnt rechts.

column: Die Hauptachse ist vertikal und beginnt oben.

column-reverse: Die Hauptachse ist vertikal und beginnt unten.

3.2 flex-wrap-Eigenschaft

Standardmäßig werden Elemente auf einer einzigen Linie (auch "Achse" genannt) angeordnet. Die flex-wrap-Eigenschaft definiert, wie umgebrochen wird, wenn eine Achse nicht alle Elemente aufnehmen kann.

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

Sie kann drei Werte annehmen.

(1) nowrap (Standard): kein Umbruch.

(2) wrap: Umbruch, erste Zeile oben.

(3) wrap-reverse: Umbruch, erste Zeile unten.

3.3 flex-flow

Die flex-flow-Eigenschaft ist eine Kurzschreibweise für die flex-direction-Eigenschaft und die flex-wrap-Eigenschaft, mit dem Standardwert row nowrap.

.box {
  flex-flow: <flex-direction> <flex-wrap>;
}

3.4 justify-content-Eigenschaft

Die justify-content-Eigenschaft definiert die Ausrichtung der Elemente auf der Hauptachse.

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

Sie kann 5 Werte annehmen. Die konkrete Ausrichtung hängt von der Richtung der Achse ab. Im Folgenden wird angenommen, dass die Hauptachse von links nach rechts verläuft.

flex-start (Standard): linksbündig

flex-end: rechtsbündig

center: zentriert

space-between: an beiden Enden ausgerichtet, mit gleichem Abstand zwischen den Elementen.

space-around: Der Abstand auf beiden Seiten jedes Elements ist gleich. Daher ist der Abstand zwischen den Elementen doppelt so groß wie der Abstand zwischen Elementen und dem Rand.

3.5 align-items-Eigenschaft

Die align-items-Eigenschaft legt fest, wie Elemente auf der Querachse ausgerichtet werden.

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

Sie kann 5 Werte annehmen. Die konkrete Ausrichtung hängt von der Richtung der Querachse ab. Im Folgenden wird angenommen, dass die Querachse von oben nach unten verläuft.

flex-start: am Anfang der Querachse ausgerichtet.

flex-end: am Ende der Querachse ausgerichtet.

center: an der Mitte der Querachse ausgerichtet.

baseline: an der Grundlinie der ersten Textzeile im Element ausgerichtet.

stretch (Standard): Wenn für das Element keine Höhe festgelegt ist oder sie auf auto gesetzt ist, füllt es die gesamte Höhe des Containers aus.

3.6 align-content-Eigenschaft

Die align-content-Eigenschaft definiert die Ausrichtung mehrerer Achsen. Wenn die Elemente nur eine Achse haben, hat diese Eigenschaft keine Auswirkung.

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

Diese Eigenschaft kann 6 Werte annehmen.

flex-start: ausgerichtet am Anfang der Querachse.

flex-end: ausgerichtet am Ende der Querachse.

center: ausgerichtet an der Mitte der Querachse.

space-between: ausgerichtet an beiden Enden der Querachse, mit gleichmäßig verteilten Abständen zwischen den Achsen.

space-around: Der Abstand auf beiden Seiten jeder Achse ist gleich. Daher ist der Abstand zwischen den Achsen doppelt so groß wie der Abstand zwischen den Achsen und dem Rand.

stretch (Standard): Die Achse füllt die gesamte Querachse aus.

4. Eigenschaften der Elemente

Die folgenden 6 Eigenschaften werden für die Elemente festgelegt.

order

flex-grow

flex-shrink

flex-basis

flex

align-self

4.1 order-Eigenschaft

Die Eigenschaft order definiert die Reihenfolge, in der Elemente angeordnet werden. Je kleiner der Wert, desto früher die Anordnung. Der Standardwert ist 0.

.item {
  order: <integer>;
}

4.2 flex-grow-Eigenschaft

Die Eigenschaft flex-grow definiert den Anteil, um den ein Element wachsen kann, mit einem Standardwert von 0, was bedeutet, dass es selbst dann nicht wächst, wenn Platz übrig ist.

.item {
  flex-grow: <number>; /* default 0 */
}

Wenn alle Elemente die Eigenschaft flex-grow mit 1 haben, teilen sie den verbleibenden Platz (falls vorhanden) gleichmäßig auf. Wenn ein Element die Eigenschaft flex-grow mit 2 hat und die anderen mit 1, belegt Ersteres doppelt so viel verbleibenden Platz wie die anderen.

4.3 flex-shrink-Eigenschaft

Die Eigenschaft flex-shrink definiert den Anteil, um den ein Element schrumpfen kann, mit einem Standardwert von 1, was bedeutet, dass das Element schrumpft, wenn nicht genügend Platz vorhanden ist.

.item {
  flex-shrink: <number>; /* default 1 */
}

Wenn alle Elemente die Eigenschaft flex-shrink mit 1 haben, schrumpfen sie proportional, wenn nicht genügend Platz vorhanden ist. Wenn ein Element die Eigenschaft flex-shrink mit 0 hat und die anderen mit 1, schrumpft Ersteres nicht, wenn nicht genügend Platz vorhanden ist.

Negative Werte sind für diese Eigenschaft ungültig.

4.4 flex-basis-Eigenschaft

Die Eigenschaft flex-basis definiert den Platz auf der Hauptachse (main size), den ein Element belegt, bevor zusätzlicher Platz verteilt wird. Der Browser berechnet anhand dieser Eigenschaft, ob auf der Hauptachse zusätzlicher Platz vorhanden ist. Ihr Standardwert ist auto, was der ursprünglichen Größe des Elements entspricht.

.item {
  flex-basis: <length> | auto; /* default auto */
}

Sie kann auf einen Wert wie die Eigenschaft width oder height gesetzt werden (zum Beispiel 350px), und das Element belegt einen festen Platz.

4.5 flex-Eigenschaft

Die Eigenschaft flex ist eine Kurzschreibweise für flex-grow, flex-shrink und flex-basis, mit einem Standardwert von 0 1 auto. Die letzten beiden Eigenschaften sind optional.

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

Diese Eigenschaft hat zwei Kurzwerte: auto (1 1 auto) und none (0 0 auto).

Es wird empfohlen, diese Eigenschaft zuerst zu verwenden, anstatt drei separate Eigenschaften zu schreiben, da der Browser die zugehörigen Werte berechnet.

4.6 align-self-Eigenschaft

Die Eigenschaft align-self ermöglicht es einem einzelnen Element, eine andere Ausrichtung als andere Elemente zu haben, und kann die Eigenschaft align-items überschreiben. Der Standardwert ist auto, was bedeutet, dass die Eigenschaft align-items des übergeordneten Elements geerbt wird; wenn kein übergeordnetes Element vorhanden ist, entspricht dies stretch.

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Diese Eigenschaft kann 6 Werte annehmen. Außer auto sind die anderen genau dieselben wie bei der Eigenschaft align-items.

Quelle: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html