Proprietatea flex-direction

Proprietatea flex-direction stabilește direcția axei principale și a axei transversale sau, cu alte cuvinte, aranjează elementele în rând sau în coloană.

Se aplică elementului părinte pentru containerele flex. Face parte din proprietatea scurtă flex-flow.

Sintaxă

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

Valori

Valoare	Descriere
`row`	Axa principală este direcționată de la stânga la dreapta. Elementele sunt aranjate în rând, în mod implicit atinge marginea din stânga, numerotarea lor are ordinea normală - de la stânga la dreapta.
`row-reverse`	Axa principală este direcționată de la dreapta la stânga. Elementele sunt aranjate în rând, în mod implicit atinge marginea din dreapta, numerotarea lor are ordinea inversă - de la dreapta la stânga.
`column`	Axa principală este direcționată de sus în jos. Elementele sunt aranjate în coloană, în mod implicit atinge partea de sus, numerotarea lor are ordinea normală - de sus în jos.
`column-reverse`	Axa principală este direcționată de jos în sus. Elementele sunt aranjate în coloană, în mod implicit ating partea de jos, numerotarea lor are ordinea inversă - de jos în sus.

Valoare implicită: row.

Exemplu

Elementele sunt aranjate în rând, în mod implicit atinge marginea din stânga, numerotarea lor are ordinea normală - de la stânga la dreapta:

<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;
}

Exemplu . Valoarea row-reverse

Elementele sunt aranjate în rând, în mod implicit atinge marginea din dreapta, numerotarea lor are ordinea inversă - de la dreapta la stânga:

<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;
}

Exemplu . Valoarea column

Elementele sunt aranjate în coloană, în mod implicit atinge partea de sus, numerotarea lor are ordinea normală - de sus în jos:

<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;
}

Exemplu . Valoarea column-reverse

Elementele sunt aranjate în coloană, în mod implicit atinge partea de jos, numerotarea lor are ordinea inversă - de jos în sus:

<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;
}

Vedeți și

proprietatea justify-content,
care stabilește alinierea de-a lungul axei principale
proprietatea align-items,
care stabilește alinierea de-a lungul axei transversale
proprietatea flex-wrap,
care stabilește afișarea pe mai multe rânduri a containerelor flex
proprietatea flex-flow,
prescurtare pentru flex-direction și flex-wrap
proprietatea order,
care stabilește ordinea elementelor flex
proprietatea align-self,
care stabilește alinierea unui singur element
proprietatea flex-basis,
care stabilește dimensiunea unui anumit element flex
proprietatea flex-grow,
care stabilește factorul de creștere al elementelor flex
proprietatea flex-shrink,
care stabilește factorul de comprimare al elementelor flex
proprietatea flex,
prescurtare pentru flex-grow, flex-shrink și flex-basis