Direção flexível - CSS-Tricks

Anonim

A flex-directionpropriedade é uma subpropriedade do módulo Layout de caixa flexível.

Ele estabelece o eixo principal, definindo assim a direção em que os flex items são colocados no flex container.

Lembrete: o eixo principal de um flex container é o eixo principal ao longo do qual os flex items são dispostos. Cuidado, não é necessariamente horizontal; depende da flex-directionpropriedade.

A flex-directionpropriedade aceita 4 valores diferentes:

  • row( padrão ): igual à direção do texto
  • row-reverse: oposto à direção do texto
  • column: mesmo que, rowmas de cima para baixo
  • column-reverse: mesmo que de row-reversecima para baixo

Observe que rowe row-reversesão afetados pela direcionalidade do flex container. Se a direção do texto for ltr, rowrepresenta o eixo horizontal orientado da esquerda para a direita e row-reverseda direita para a esquerda; se a direção for rtl, é o oposto.

Sintaxe

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

Demo

Na seguinte demonstração:

  • A lista vermelha está definida para row
  • A lista amarela está definida para row-reverse
  • A lista azul está definida para column
  • A lista verde está definida para column-reverse

Nota: a direção do texto não foi editada.

Confira esta Caneta!

Basicamente, você usará rowna maioria dos casos ou columnem certas circunstâncias. Caso contrário, é bastante incomum inverter a ordem de direção.

Suporte para navegador

  • (moderno) significa a sintaxe recente da especificação (por exemplo display: flex;)
  • (híbrido) significa uma sintaxe não oficial estranha de 2011 (por exemplo display: flexbox;)
  • (antigo) significa a sintaxe antiga de 2009 (por exemplo display: box;)
cromada Safári Raposa de fogo Ópera IE Android iOS
21+ (moderno)
20- (antigo)		 3.1+ (antigo) 2-21 (antigo)
22+ (novo)		 12,1+ (moderno) 10+ (híbrido) 2.1+ (antigo) 3.2+ (antigo)

O navegador Blackberry 10+ suporta a nova sintaxe.

Para obter mais informações sobre como misturar sintaxes para obter o melhor suporte do navegador, consulte este artigo (CSS-Tricks) ou este artigo (DevOpera).