Propriedade flex-direction

A propriedade flex-direction define a direção dos eixos principal e transversal ou, em outras palavras, organiza os elementos em linha ou coluna.

Aplica-se ao elemento pai para contêineres flex. Faz parte da propriedade abreviada flex-flow.

Sintaxe

seletor {
	flex-direction: row | row-reverse | column | column-reverse;
}

Valor	Descrição
`row`	O eixo principal é direcionado da esquerda para a direita. Os elementos são dispostos em linha, por padrão alinhados à esquerda, e sua numeração segue a ordem normal - da esquerda para a direita.
`row-reverse`	O eixo principal é direcionado da direita para a esquerda. Os elementos são dispostos em linha, por padrão alinhados à direita, e sua numeração segue a ordem inversa - da direita para a esquerda.
`column`	O eixo principal é direcionado de cima para baixo. Os elementos são dispostos em coluna, por padrão alinhados ao topo, e sua numeração segue a ordem normal - de cima para baixo.
`column-reverse`	O eixo principal é direcionado de baixo para cima. Os elementos são dispostos em coluna, por padrão alinhados à base, e sua numeração segue a ordem inversa - de baixo para cima.

Valor padrão: row.

Elementos dispostos em linha, por padrão alinhados à esquerda, sua numeração segue a ordem normal - da esquerda para a direita:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	flex-direction: row;
	display: flex;
}
#parent > div {
	border: 1px solid #696989;
	width: 100px;
	height: 50px;
}

Elementos dispostos em linha, por padrão alinhados à direita, sua numeração segue a ordem inversa - da direita para a esquerda:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	flex-direction: row-reverse;
	display: flex;
}
#parent > div {
	border: 1px solid #696989;
	width: 100px;
	height: 50px;
}

Elementos dispostos em coluna, por padrão alinhados ao topo, sua numeração segue a ordem normal - de cima para baixo:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	flex-direction: column;
	display: flex;
}
#parent > div {
	border: 1px solid #696989;
	width: 100px;
	height: 50px;
}

Elementos dispostos em coluna, por padrão alinhados à base, sua numeração segue a ordem inversa - de baixo para cima:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	flex-direction: column-reverse;
	display: flex;
}
#parent > div {
	border: 1px solid #696989;
	width: 100px;
	height: 50px;
}

propriedade justify-content,
que define o alinhamento ao longo do eixo principal
propriedade align-items,
que define o alinhamento ao longo do eixo transversal
propriedade flex-wrap,
que define a quebra de linha em contêineres flex
propriedade flex-flow,
abreviação para flex-direction e flex-wrap
propriedade order,
que define a ordem dos itens flex
propriedade align-self,
que define o alinhamento de um único item
propriedade flex-basis,
que define o tamanho de um item flex específico
propriedade flex-grow,
que define a capacidade de crescimento dos itens flex
propriedade flex-shrink,
que define a capacidade de redução dos itens flex
propriedade flex,
abreviação para flex-grow, flex-shrink e flex-basis