flex-direction հատկությունը

flex-direction հատկությունը սահմանում է գլխավոր և երկրորդական առանցքների ուղղությունը կամ, այլ կերպ ասած, տարրերը դասավորում է տողով կամ սյունակով:

Կիրառվում է զանգվածային բլոկների ծնողական տարրի նկատմամբ: Մտնում է flex-flow հատկության կազմի մեջ:

Շարահյուսություն

ընտրիչ {
	flex-direction: row | row-reverse | column | column-reverse;
}

Արժեք	Նկարագրություն
`row`	Գլխավոր առանցքն ուղղված է ձախից աջ: Տարրերը դասավորված են տողով, լռելայնով սեղմված են ձախ եզրին, դրանց համարակալումն ունի սովորական հերթականություն - ձախից աջ:
`row-reverse`	Գլխավոր առանցքն ուղղված է աջից ձախ: Տարրերը դասավորված են տողով, լռելայնով սեղմված են աջ եզրին, դրանց համարակալումն ունի հակադարձ հերթականություն - աջից ձախ:
`column`	Գլխավոր առանցքն ուղղված է վերևից ներքև: Տարրերը դասավորված են սյունակով, լռելայնով սեղմված են վերևի եզրին, դրանց համարակալումն ունի սովորական հերթականություն - վերևից ներքև:
`column-reverse`	Գլխավոր առանցքն ուղղված է ներքևից վերև: Տարրերը դասավորված են սյունակով, լռելայնով սեղմված են ներքևի եզրին, դրանց համարակալումն ունի հակադարձ հերթականություն - ներքևից վերև:

Լռելայն արժեքը՝ row:

Տարրերը դասավորված են տողով, լռելայնով սեղմված են ձախ եզրին, դրանց համարակալումն ունի սովորական հերթականություն - ձախից աջ:

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

Տարրերը դասավորված են տողով, լռելայնով սեղմված են աջ եզրին, դրանց համարակալումն ունի հակադարձ հերթականություն - աջից ձախ:

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

Տարրերը դասավորված են սյունակով, լռելայնով սեղմված են վերևի եզրին, դրանց համարակալումն ունի սովորական հերթականություն - վերևից ներքև:

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

Տարրերը դասավորված են սյունակով, լռելայնով սեղմված են ներքևի եզրին, դրանց համարակալումն ունի հակադարձ հերթականություն - ներքևից վերև:

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

justify-content հատկությունը,
որը սահմանում է հավասարեցումը գլխավոր առանցքի երկայնքով
align-items հատկությունը,
որը սահմանում է հավասարեցումը երկրորդական առանցքի երկայնքով
flex-wrap հատկությունը,
որը սահմանում է զանգվածային բլոկների բազմատողություն
flex-flow հատկությունը,
flex-direction-ի և flex-wrap-ի համառոտագրություն
order հատկությունը,
որը սահմանում է զանգվածային բլոկների հերթականությունը
align-self հատկությունը,
որը սահմանում է մեկ բլոկի հավասարեցում
flex-basis հատկությունը,
որը սահմանում է կոնկրետ զանգվածային բլոկի չափը
flex-grow հատկությունը,
որը սահմանում է զանգվածային բլոկների ագահությունը
flex-shrink հատկությունը,
որը սահմանում է զանգվածային բլոկների սեղմելիությունը
flex հատկությունը,
flex-grow-ի, flex-shrink-ի և flex-basis-ի համառոտագրություն