Direzione flessibile - Trucchi CSS

Anonim

La flex-directionproprietà è una proprietà secondaria del modulo Layout riquadro flessibile.

Stabilisce l'asse principale, definendo così la direzione in cui gli articoli flessibili vengono posti nel contenitore flessibile.

Promemoria: l'asse principale di un contenitore flessibile è l'asse principale lungo il quale sono disposti gli elementi flessibili. Attenzione, non è necessariamente orizzontale; dipende dalla flex-directionproprietà.

La flex-directionproprietà accetta 4 diversi valori:

  • row( predefinito ): uguale alla direzione del testo
  • row-reverse: opposto alla direzione del testo
  • column: uguale rowma dall'alto verso il basso
  • column-reverse: uguale row-reversedall'alto verso il basso

Notare che rowe row-reversesono influenzati dalla direzionalità del contenitore flessibile. Se la direzione del testo è ltr, rowrappresenta l'asse orizzontale orientato da sinistra a destra e row-reverseda destra a sinistra; se la direzione è rtl, è l'opposto.

Sintassi

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

Demo

Nella seguente demo:

  • La lista rossa è impostata su row
  • La lista gialla è impostata su row-reverse
  • La lista blu è impostata su column
  • La lista verde è impostata su column-reverse

Nota: la direzione del testo non è stata modificata.

Dai un'occhiata a questa penna!

Quindi, in pratica, lo utilizzerai rownella maggior parte dei casi o columnin determinate circostanze. Altrimenti, è piuttosto raro invertire l'ordine di direzione.

Supporto browser

  • (moderno) indica la sintassi recente dalla specifica (ad esempio display: flex;)
  • (ibrido) indica una strana sintassi non ufficiale del 2011 (es. display: flexbox;)
  • (vecchio) indica la vecchia sintassi del 2009 (ad esempio display: box;)
Cromo Safari Firefox musica lirica IE Android iOS
21+ (moderno)
20- (vecchio)		 3.1+ (vecchio) 2-21 (vecchio)
22+ (nuovo)		 12.1+ (moderno) 10+ (ibrido) 2.1+ (vecchio) 3.2+ (vecchio)

Il browser Blackberry 10+ supporta la nuova sintassi.

Per ulteriori informazioni su come mescolare le sintassi per ottenere il miglior supporto del browser, fare riferimento a questo articolo (CSS-Tricks) o questo articolo (DevOpera).