Egenskapen flex-direction

Egenskapen flex-direction sätter riktningen för huvudaxeln och tväraxeln eller, med andra ord, placerar element i rad eller kolumn.

Tillämpas på föräldraelementet för flexboxar. Ingår i genvägsegenskapen flex-flow.

Syntax

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

Värde	Beskrivning
`row`	Huvudaxeln är riktad från vänster till höger. Elementen är placerade i rad, som standard tryckta mot vänster kant, deras numrering har normal ordning - från vänster till höger.
`row-reverse`	Huvudaxeln är riktad från höger till vänster. Elementen är placerade i rad, som standard tryckta mot höger kant, deras numrering har omvänd ordning - från höger till vänster.
`column`	Huvudaxeln är riktad från topp till botten. Elementen är placerade i kolumn, som standard tryckta mot toppen, deras numrering har normal ordning - från topp till botten.
`column-reverse`	Huvudaxeln är riktad från botten till topp. Elementen är placerade i kolumn, som standard tryckta mot botten, deras numrering har omvänd ordning - från botten till topp.

Standardvärde: row.

Elementen är placerade i rad, som standard tryckta mot vänster kant, deras numrering har normal ordning - från vänster till höger:

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

Elementen är placerade i rad, som standard tryckta mot höger kant, deras numrering har omvänd ordning - från höger till vänster:

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

Elementen är placerade i kolumn, som standard tryckta mot toppen, deras numrering har normal ordning - från topp till botten:

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

Elementen är placerade i kolumn, som standard tryckta mot botten, deras numrering har omvänd ordning - från botten till topp:

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