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

Результат:

Ошондой эле караңыз