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

Результат:

Сондай-ақ қараңыз