CSS တွင် Cross Axis အတိုင်း Flex ဘလောက်များကို ညှိခြင်း

ယခု ဘလောက်များကို Cross Axis အတိုင်းပါ ညှိပါမည်။ ဤဝင်ရိုးအတိုင်း ညှိခြင်းကို align-items ဂုဏ်သတ္တိဖြင့် သတ်မှတ်ပါသည်။ flex-start တန်ဖိုးသည် အစိတ်အပိုင်းများကို ဝင်ရိုး၏အစသို့ ကပ်စေပြီး flex-end တန်ဖိုးသည် အဆုံးသို့ ကပ်စေပါသည်။

ဥပမာများဖြင့် စမ်းကြည့်ပါမည်။

ဥပမာ

အဓိကဝင်ရိုးကို ဘယ်မှညာသို့ ဦးတည်ပါမည်။ ဤအခြေအနေတွင် Cross Axis သည် အထက်မှအောက်သို့ ဦးတည်ပါလိမ့်မည်။ ကျွန်ုပ်တို့၏ ဘလောက်များ၏ တည်နေရာကို အဓိကဝင်ရိုးအတိုင်းရော Cross Axis အတိုင်းပါ ညှိကြည့်ပါမည်။

အဓိကဝင်ရိုးအတိုင်း ဘလောက်များကို ၎င်း၏အစဖြစ်သော ဘယ်ဘက်အစွန်းသို့ ကပ်ပါမည်။ ဤအတွက် justify-content ကို flex-start တန်ဖိုးအဖြစ် သတ်မှတ်ပါမည်။ Cross Axis အတိုင်းလည်း ဘလောက်များကို ၎င်း၏အစဖြစ်သော အပေါ်ဘက်အစွန်းသို့ ကပ်ပါမည်။ ဤအတွက် align-items ကိုလည်း flex-start တန်ဖိုးအဖြစ် သတ်မှတ်ပါမည်။

ကျွန်ုပ်တို့ရရှိသော ရလဒ်ကို ကြည့်ပါမည်။

.parent {
	display: flex;
	flex-direction:  row;        /* အဓိကဝင်ရိုး ညာဘက်၊ Cross Axis အောက်ဘက် */
	justify-content: flex-start; /* ဘလောက်များကို အဓိကဝင်ရိုး၏အစသို့ */
	align-items:     flex-start; /* ဘလောက်များကို Cross Axis ၏အစသို့ */
}

ကုဒ်အလုပ်လုပ်သည့်ရလဒ်။

ဥပမာ

ယခု ဘလောက်များကို Cross Axis ၏အဆုံးသို့ ကပ်ပါမည်၊ ဆိုလိုသည်မှာ အောက်ခြေသို့ဖြစ်သည်။ ဤအတွက် align-items ကို flex-end တန်ဖိုးအဖြစ် သတ်မှတ်ပါမည်။

.parent {
	display: flex;
	flex-direction:  row;        /* အဓိကဝင်ရိုး ညာဘက်၊ Cross Axis အောက်ဘက် */
	justify-content: flex-start; /* ဘလောက်များကို အဓိကဝင်ရိုး၏အစသို့ */
	align-items:     flex-end;   /* ဘလောက်များကို Cross Axis ၏အဆုံးသို့ */
}

ကုဒ်အလုပ်လုပ်သည့်ရလဒ်။

ဥပမာ

ယခု အဓိကဝင်ရိုးကို အထက်မှအောက်သို့ ဦးတည်ပါမည်။ အဓိကဝင်ရိုးသည် ဒေါင်လိုက်ဖြစ်သောကြောင့် Cross Axis သည် ညာမှဘယ်သို့ ဦးတည်ပါလိမ့်မည်။ ဘလောက်များကို ဝင်ရိုးနှစ်ခုစလုံး၏အစသို့ ကပ်ပါမည်။

.parent {
	display: flex;
	flex-direction:  column;     /* အဓိကဝင်ရိုး အောက်ဘက်၊ Cross Axis ညာဘက် */
	justify-content: flex-start; /* ဘလောက်များကို အဓိကဝင်ရိုး၏အစသို့ */
	align-items:     flex-start; /* ဘလောက်များကို Cross Axis ၏အစသို့ */
}

ကုဒ်အလုပ်လုပ်သည့်ရလဒ်။

ဥပမာ

ယခု Cross Axis အတိုင်း ဘလောက်များကို ၎င်း၏အဆုံးသို့ ကပ်ပါမည်။

.parent {
	display: flex;
	flex-direction:  column;     /* အဓိကဝင်ရိုး အောက်ဘက်၊ Cross Axis ညာဘက် */
	justify-content: flex-start; /* ဘလောက်များကို အဓိကဝင်ရိုး၏အစသို့ */
	align-items:     flex-end;   /* ဘလောက်များကို Cross Axis ၏အဆုံးသို့ */
}

ကုဒ်အလုပ်လုပ်သည့်ရလဒ်။

ဥပမာ

ဘလောက်များကို ဝင်ရိုးနှစ်ခုစလုံး၏အဆုံးသို့ ကပ်ပါမည်။

.parent {
	display: flex;
	flex-direction:  column;   /* အဓိကဝင်ရိုး အောက်ဘက်၊ Cross Axis ညာဘက် */
	justify-content: flex-end; /* ဘလောက်များကို အဓိကဝင်ရိုး၏အဆုံးသို့ */
	align-items:     flex-end; /* ဘလောက်များကို Cross Axis ၏အဆုံးသို့ */
}

ကုဒ်အလုပ်လုပ်သည့်ရလဒ်။

ဥပမာ

အဓိကဝင်ရိုး၏ ဦးတည်ချက်ကို ပြောင်းပါမည် - ၎င်းကို အောက်မှအထက်သို့ ဦးတည်ပါမည်။ ဤသို့ဖြင့် Cross Axis ၏ ဦးတည်ချက်သည် မပြောင်းလဲပါ၊ အဘယ်ကြောင့်ဆိုသော် အဓိကဝင်ရိုးသည် ဒေါင်လိုက်အတိုင်းပင် ဆက်လက်တည်ရှိသောကြောင့်ဖြစ်သည်။

ဘလောက်များကို ဝင်ရိုးနှစ်ခုစလုံး၏အစသို့ ကပ်ပါမည်။

.parent {
	display: flex;
	flex-direction:  column-reverse; /* အဓိကဝင်ရိုး အထက်ဘက်၊ Cross Axis ညာဘက် */
	justify-content: flex-start;     /* ဘလောက်များကို အဓိကဝင်ရိုး၏အစသို့ */
	align-items:     flex-start;     /* ဘလောက်များကို Cross Axis ၏အစသို့ */
}

ကုဒ်အလုပ်လုပ်သည့်ရလဒ်။

လက်တွေ့လေ့ကျင့်ခန်းများ

ဤနမူနာအတိုင်း စာမျက်နှာကို ပြန်လုပ်ပါ။