თვისება 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;
}

მაგალითი . მნიშვნელობა row-reverse

ელემენტები განლაგებულია ზედიზედ, ნაგულისხმევად მიბმული მარჯვენა კიდესთან, მათი ნუმერაცია აქვს შებრუნებული რიგი - მარჯვნიდან მარცხნივ:

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

მაგალითი . მნიშვნელობა column

ელემენტები განლაგებულია სვეტად, ნაგულისხმევად მიბმული ზედა კიდესთან, მათი ნუმერაცია აქვს ჩვეულებრივი რიგი - ზემოდან ქვემოთ:

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

მაგალითი . მნიშვნელობა column-reverse

ელემენტები განლაგებულია სვეტად, ნაგულისხმევად მიბმული ქვედა კიდესთან, მათი ნუმერაცია აქვს შებრუნებული რიგი - ქვემოდან ზემოთ:

<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 ბლოკების მრავალსტრიქონიანობას
თვისება flex-flow,
შემოკლება flex-direction-ისა და flex-wrap-ისთვის
თვისება order,
რომელიც ადგენს flex ბლოკების რიგს
თვისება align-self,
რომელიც ადგენს ერთი ბლოკის სწორებას
თვისება flex-basis,
რომელიც ადგენს კონკრეტული flex ბლოკის ზომას
თვისება flex-grow,
რომელიც ადგენს flex ბლოკების გაზრდის კოეფიციენტს
თვისება flex-shrink,
რომელიც ადგენს flex ბლოკების შევიწროების კოეფიციენტს
თვისება flex,
შემოკლება flex-grow-ის, flex-shrink-ის და flex-basis-ისთვის