Flex-direction - CSS-Tricks

Anonim

flex-directionProprietatea este o sub-proprietate a modulului flexibil Box Layout.

Stabilește axa principală, definind astfel direcția elementelor flexibile sunt plasate în containerul flexibil.

Memento: axa principală a unui container flexibil este axa primară de-a lungul căreia sunt așezate articolele flexibile. Atenție, nu este neapărat orizontală; depinde de flex-directionproprietate.

flex-directionProprietatea acceptă 4 valori diferite:

  • row( implicit ): la fel ca direcția textului
  • row-reverse: opus direcției textului
  • column: la fel ca rowdar de sus în jos
  • column-reverse: la fel ca de row-reversesus în jos

Rețineți că rowși row-reversesunt afectate de direcționalitatea containerului flexibil. Dacă direcția sa de text este ltr, rowreprezintă axa orizontală orientată de la stânga la dreapta și de row-reversela dreapta la stânga; dacă direcția este rtl, este opusul.

Sintaxă

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

Demo

În următoarea demonstrație:

  • Lista roșie este setată la row
  • Lista galbenă este setată la row-reverse
  • Lista albastră este setată la column
  • Lista verde este setată la column-reverse

Notă: direcția textului nu a fost modificată.

Verificați acest stilou!

Deci, practic, veți utiliza rowîn majoritatea cazurilor sau columnîn anumite circumstanțe. În caz contrar, este destul de neobișnuit să inversăm ordinea de direcție.

Suport pentru browser

  • (modern) înseamnă sintaxa recentă din specificație (de exemplu display: flex;)
  • (hibrid) înseamnă o sintaxă neoficială ciudată din 2011 (de exemplu display: flexbox;)
  • (vechi) înseamnă sintaxa veche din 2009 (de exemplu display: box;)
Crom Safari Firefox Operă IE Android iOS
21+ (modern)
20- (vechi)		 3.1+ (vechi) 2-21 (vechi)
22+ (nou)		 12.1+ (modern) 10+ (hibrid) 2.1+ (vechi) 3.2+ (vechi)

Browserul Blackberry 10+ acceptă noua sintaxă.

Pentru mai multe informații despre cum să amestecați sintaxele pentru a obține cea mai bună asistență pentru browser, vă rugăm să consultați acest articol (CSS-Tricks) sau acest articol (DevOpera).