Kierunek flex - CSS-Tricks

Anonim

flex-directionNieruchomość jest sub-property modułu Flexible Box Layout.

Ustanawia główną oś, definiując w ten sposób kierunek, w którym elementy elastyczne są umieszczane w pojemniku elastycznym.

Przypomnienie: główna oś pojemnika elastycznego jest główną osią, wzdłuż której układane są elementy elastyczne. Uważaj, to niekoniecznie jest poziome; to zależy od flex-directionnieruchomości.

flex-directionWłaściwość przyjmuje 4 różne wartości:

  • row( domyślnie ): taki sam jak kierunek tekstu
  • row-reverse: przeciwnie do kierunku tekstu
  • column: tak samo jak, rowale od góry do dołu
  • column-reverse: tak samo jak od row-reversegóry do dołu

Zauważ, że rowi row-reversema na nie wpływ kierunkowość pojemnika elastycznego. Jeśli kierunek tekstu to ltr, rowreprezentuje oś poziomą zorientowaną od lewej do prawej i row-reverseod prawej do lewej; jeśli kierunek jest rtlodwrotny.

Składnia

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

Próbny

W poniższym demo:

  • Czerwona lista jest ustawiona na row
  • Żółta lista jest ustawiona na row-reverse
  • Niebieska lista jest ustawiona na column
  • Zielona lista jest ustawiona na column-reverse

Uwaga: kierunek tekstu nie został zmieniony.

Sprawdź ten długopis!

Zasadniczo będziesz używać roww większości przypadków lub columnw pewnych okolicznościach. W przeciwnym razie rzadko zmienia się kolejność kierunków.

Wsparcie przeglądarki

  • (nowoczesny) oznacza najnowszą składnię ze specyfikacji (np. display: flex;)
  • (hybryda) oznacza dziwną nieoficjalną składnię z 2011 roku (np. display: flexbox;)
  • (stara) oznacza starą składnię z 2009 roku (np. display: box;)
Chrom Safari Firefox Opera TO ZNACZY Android iOS
21+ (nowoczesny)
20- (stary)		 3.1+ (stary) 2-21 (stare)
22+ (nowe)		 12.1+ (nowoczesny) 10+ (hybryda) 2.1+ (stary) 3.2+ (stary)

Przeglądarka Blackberry 10+ obsługuje nową składnię.

Więcej informacji na temat łączenia składni w celu uzyskania najlepszej obsługi przeglądarki można znaleźć w tym artykule (Sztuczki CSS) lub w tym artykule (DevOpera).