CSS Reference Manual

CSS @rules (RULES)

Complete list of CSS attributes

CSS3 flex-flow Eigenschaft CSS3 flex-basis Eigenschaft

CSS3 flex-Verwendung und Beispiele für die Eigenschaft direction

Durch Festlegen der Richtung der Hauptachse des Flex-Containers, flex-Die CSS-Eigenschaft direction bestimmt, wie Flex-Elemente in einem Flex-Container positioniert werden.

Die folgende Tabelle zeigt die Verwendung und Versionshistorie dieses Attributes sowie die Syntax für seine Verwendung im JavaScript-Skript.

Standardwert:	row
Geeignet für:	Flex-Kontainer
Vererbung:	Keine
Animierbar:	Nein.Bitte siehe Animationseigenschaft.
Version:	CSS3neue Funktion
JavaScript-Syntax:	object.style.flexDirection="row-reverse"

flex-Syntax der Verwendung von direction

Die Syntax dieses Attributes ist wie folgt:

flex-direction: row | row-reverse | column | column-reverse | initial | inherit

Der folgende Beispiel zeigt, wie man flex verwendet-direction-Eigenschaft.

Beispiel

.flex-container {
　　　　/*　Safari　*/
　　　　display:　-webkit-flex;
　　　　-webkit-flex-direction: row-reverse;
　　　　
　　　　display: flex;
　　　　flex-direction: row-reverse;　　　　
}

Testen Sie es heraus‹/›

Werte der Eigenschaft

Die nachstehende Tabelle beschreibt die Werte dieser Eigenschaft.

Wert	Beschreibung
row	Die Hauptachse des flex-Containers entspricht der Inlineachse der aktuellen Schreibweise, d.h. der Textdirection.
row-reverse	Wie row, aber der Anfang und das Ende der Achse umgekehrt.
column	Die Hauptachse des flex-Containers entspricht der Blockachse der aktuellen Textdirection (vertikale Schreibweise bei horizontaler Textausrichtung und horizontale Schreibweise bei vertikaler Textausrichtung).
column-reverse	Wie die Spalten, aber der Anfang und das Ende der Achse umgekehrt.
initial	Setzen Sie diesen Wert auf seinen Standardwert.
inherit	Wenn angegeben, verwendet der verknüpfte Element seine Flex-Eigenschaft des Elternelements-Werte der direction-Eigenschaft.

Browserkompatibilität

flex-Kompatibilität der direction-Eigenschaft der Browser, die in der folgenden Tabelle angegebenen Zahlen stellen die niedrigste Versionsnummer dar, die die Eigenschaft unterstützt; alle gängigen Browser unterstützen diese Eigenschaft.

	Firefox 18+ ^-moz-,28 Google Chrome 21+ ^-webkit-,29 Internet Explorer 10+ ^-ms-,11 Apple Safari 6.1+ ^-webkit- Opera 12.1+

Weiters Lesen

Bitte beziehen Sie sich auf die folgenden Anleitungen:CSS3Mehrzeilenlayout.

zusammenhängende Eigenschaften:align-content,align-items,align-self,display,flex,flex-basis,flex-flow,flex-grow,flex-shrink,flex-wrap,justify-content,min-height,min-width,order.

CSS3 flex-flow Eigenschaft CSS3 flex-basis Eigenschaft