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

Результат:

ဤသည်ကိုလည်း ကြည့်ပါ