Flex-Richtung - CSS-Tricks

Anonim

Die flex-directionEigenschaft ist eine Untereigenschaft des Moduls Flexible Box Layout.

Es legt die Hauptachse fest und definiert so die Richtung, in die Flex-Elemente im Flex-Container platziert werden.

Erinnerung: Die Hauptachse eines Flex-Containers ist die Hauptachse, entlang der Flex-Elemente angeordnet sind. Achtung, es ist nicht unbedingt horizontal; es hängt von der flex-directionEigenschaft ab.

Die flex-directionEigenschaft akzeptiert 4 verschiedene Werte:

  • row( Standard ): Entspricht der Textrichtung
  • row-reverse: entgegengesetzt zur Textrichtung
  • column: wie rowaber von oben nach unten
  • column-reverse: wie row-reverseoben nach unten

Beachten Sie, dass rowund row-reversevon der Richtung des Flex-Containers beeinflusst werden. Wenn die Textrichtung ist ltr, rowstellt sie die horizontale Achse dar, die von links nach rechts und row-reversevon rechts nach links ausgerichtet ist. Wenn die Richtung ist rtl, ist es das Gegenteil.

Syntax

flex-direction: row | row-reverse | column | column-reverse .flex-container ( flex-direction: row; )

Demo

In der folgenden Demo:

  • Rote Liste ist auf gesetzt row
  • Die gelbe Liste ist auf gesetzt row-reverse
  • Die blaue Liste ist auf gesetzt column
  • Die grüne Liste ist auf gesetzt column-reverse

Hinweis: Die Textrichtung wurde nicht bearbeitet.

Schauen Sie sich diesen Stift an!

Grundsätzlich werden Sie rowin den meisten Fällen oder columnunter bestimmten Umständen verwenden. Ansonsten ist es ziemlich ungewöhnlich, die Richtungsreihenfolge umzukehren.

Browser-Unterstützung

  • ( h ) bedeutet , die kürzlich von der Syntax - Spezifikation (z display: flex;)
  • (hybrid) bedeutet eine ungerade nicht offizielle Syntax ab 2011 (z display: flexbox;)
  • (alt) bedeutet die alte Syntax von 2009 (zB display: box;)
Chrom Safari Feuerfuchs Oper IE Android iOS
21+ (modern)
20- (alt)		 3.1+ (alt) 2-21 (alt)
22+ (neu)		 12.1+ (modern) 10+ (Hybrid) 2.1+ (alt) 3,2+ (alt)

Blackberry Browser 10+ unterstützt die neue Syntax.

Weitere Informationen zum Mischen von Syntaxen, um die beste Browserunterstützung zu erhalten, finden Sie in diesem Artikel (CSS-Tricks) oder in diesem Artikel (DevOpera).