Flex-direction касиети

flex-direction касиети башкы жана көндүрмө октордун багытын белгилейт, башкача айтканда, элементтерди катар же тизмек катары жайгаштырат.

Flex блоктор үчүн ата-эне элементине колдонулат. 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;
}