flex-direction ဂုဏ်သတ္တိ

flex-direction ဂုဏ်သတ္တိသည် အဓိကဝင်ရိုးနှင့် ကူးဝင်ရိုး၏ ဦးတည်ချက်ကို သတ်မှတ်ပေးသည် သို့မဟုတ် တစ်နည်းအားဖြင့် ပြောရလျှင် အရာဝတ္ထုများကို အတန်းလိုက် သို့မဟုတ် ကော်လံအလိုက် စီစဉ်ပေးသည်။

Flex ဘလောက်များအတွက် မိဘအရာဝတ္ထုသို့ သက်ရောက်သည်။ ဂုဏ်သတ္တိအတိုကောက် flex-flow ၏ အစိတ်အပိုင်းဖြစ်သည်။

ဝါကျဖွဲ့စည်းပုံ

ရွေးချယ်သူ {
	flex-direction: row | row-reverse | column | column-reverse;
}

တန်ဖိုးများ

တန်ဖိုး	ဖော်ပြချက်
`row`	အဓိကဝင်ရိုးသည် ဘယ်မှညာသို့ ဦးတည်သည်။ အရာဝတ္ထုများကို အတန်းလိုက်စီသည်၊ စံအားဖြင့် ဘယ်ဘက်အနားသို့ ကပ်ထားသည်၊ ၎င်းတို့၏ နံပါတ်စဉ်သည် သာမန် အစဉ်အတိုင်းရှိသည် - ဘယ်မှညာသို့။
`row-reverse`	အဓိကဝင်ရိုးသည် ညာမှဘယ်သို့ ဦးတည်သည်။ အရာဝတ္ထုများကို အတန်းလိုက်စီသည်၊ စံအားဖြင့် ညာဘက်အနားသို့ ကပ်ထားသည်၊ ၎င်းတို့၏ နံပါတ်စဉ်သည် ပြောင်းပြန် အစဉ်အတိုင်းရှိသည် - ညာမှဘယ်သို့။
`column`	အဓိကဝင်ရိုးသည် အပေါ်မှအောက်သို့ ဦးတည်သည်။ အရာဝတ္ထုများကို ကော်လံအလိုက်စီသည်၊ စံအားဖြင့် ထိပ်ဆုံးသို့ ကပ်ထားသည်၊ ၎င်းတို့၏ နံပါတ်စဉ်သည် သာမန် အစဉ်အတိုင်းရှိသည် - အပေါ်မှအောက်သို့။
`column-reverse`	အဓိကဝင်ရိုးသည် အောက်မှအပေါ်သို့ ဦးတည်သည်။ အရာဝတ္ထုများကို ကော်လံအလိုက်စီသည်၊ စံအားဖြင့် အောက်ခြေသို့ ကပ်ထားသည်၊ ၎င်းတို့၏ နံပါတ်စဉ်သည် ပြောင်းပြန် အစဉ်အတိုင်းရှိသည် - အောက်မှအပေါ်သို့။

စံအတိုင်းတန်ဖိုး: row.

ဥပမာ

အရာဝတ္ထုများကို အတန်းလိုက်စီထားသည်၊ စံအားဖြင့် ဘယ်ဘက်အနားသို့ ကပ်ထားသည်၊ ၎င်းတို့၏ နံပါတ်စဉ်သည် သာမန်အစဉ်အတိုင်းရှိသည် - ဘယ်မှညာသို့:

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

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

ဥပမာ . row-reverse တန်ဖိုး

အရာဝတ္ထုများကို အတန်းလိုက်စီထားသည်၊ စံအားဖြင့် ညာဘက်အနားသို့ ကပ်ထားသည်၊ ၎င်းတို့၏ နံပါတ်စဉ်သည် ပြောင်းပြန်အစဉ်အတိုင်းရှိသည် - ညာမှဘယ်သို့:

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

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

ဥပမာ . column တန်ဖိုး

အရာဝတ္ထုများကို ကော်လံအလိုက်စီထားသည်၊ စံအားဖြင့် ထိပ်ဆုံးသို့ ကပ်ထားသည်၊ ၎င်းတို့၏ နံပါတ်စဉ်သည် သာမန် အစဉ်အတိုင်းရှိသည် - အပေါ်မှအောက်သို့:

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

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

ဥပမာ . column-reverse တန်ဖိုး

အရာဝတ္ထုများကို ကော်လံအလိုက်စီထားသည်၊ စံအားဖြင့် အောက်ခြေသို့ ကပ်ထားသည်၊ ၎င်းတို့၏ နံပါတ်စဉ်သည် ပြောင်းပြန် အစဉ်အတိုင်းရှိသည် - အောက်မှအပေါ်သို့:

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

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

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

justify-content ဂုဏ်သတ္တိ,
သည် အဓိကဝင်ရိုးတလျှောက် ညှိခြင်းကို သတ်မှတ်ပေးသည်
align-items ဂုဏ်သတ္တိ,
သည် ကူးဝင်ရိုးတလျှောက် ညှိခြင်းကို သတ်မှတ်ပေးသည်
flex-wrap ဂုဏ်သတ္တိ,
သည် flex ဘလောက်များ၏ မျဉ်းကြောင်းများစွာ ဖြစ်မှုကို သတ်မှတ်ပေးသည်
flex-flow ဂုဏ်သတ္တိ,
flex-direction နှင့် flex-wrap အတွက် အတိုကောက်
order ဂုဏ်သတ္တိ,
သည် flex ဘလောက်များ၏ အစဉ်ကို သတ်မှတ်ပေးသည်
align-self ဂုဏ်သတ္တိ,
သည် ဘလောက်တစ်ခုတည်း၏ ညှိခြင်းကို သတ်မှတ်ပေးသည်
flex-basis ဂုဏ်သတ္တိ,
သည် flex ဘလောက်တစ်ခုချင်း၏ အရွယ်အစားကို သတ်မှတ်ပေးသည်
flex-grow ဂုဏ်သတ္တိ,
သည် flex ဘလောက်များ၏ လောဘကြီးမှုကို သတ်မှတ်ပေးသည်
flex-shrink ဂုဏ်သတ္တိ,
သည် flex ဘလောက်များ၏ ကျုံ့နိုင်မှုကို သတ်မှတ်ပေးသည်
flex ဂုဏ်သတ္တိ,
flex-grow, flex-shrink နှင့် flex-basis အတွက် အတိုကောက်