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

Результат:

මෙයත් බලන්න