თვისება flex-direction

თვისება flex-direction ადგენს მთავარი და განივი ღერძის მიმართულებას ან, სხვა სიტყვებით რომ ვთქვათ, აწყობს ელემენტებს ზედიზედ ან სვეტად.

გამოიყენება მშობელ ელემენტზე flex ბლოკებისთვის. შედის შემოკლებულ თვისებაში flex-flow.

სინტაქსი

cssსელექტორი {
  flex-direction: row | row-reverse | column | column-reverse;
}

მნიშვნელობები

ნაგულისხმევი მნიშვნელობა: row.

მაგალითი

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

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  flex-direction: row;
  display: flex;
}
#parent > div {
  border: 1px solid #696989;
  width: 100px;
  height: 50px;
}

Результат:

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

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

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  flex-direction: row-reverse;
  display: flex;
}
#parent > div {
  border: 1px solid #696989;
  width: 100px;
  height: 50px;
}

Результат:

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

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

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  flex-direction: column;
  display: flex;
}
#parent > div {
  border: 1px solid #696989;
  width: 100px;
  height: 50px;
}

Результат:

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

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

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  flex-direction: column-reverse;
  display: flex;
}
#parent > div {
  border: 1px solid #696989;
  width: 100px;
  height: 50px;
}

Результат:

იხილეთ აგრეთვე