CSS တွင် အဓိက ဝင်ရိုးအလိုက် flex အစိတ်အပိုင်းများကို ညှိခြင်း

justify-content ဂုဏ်သတ္တိသည် အဓိကဝင်ရိုးတစ်လျှောက် အစိတ်အပိုင်းများကို ညှိရန် ခွင့်ပြုပါသည်။ ယခင်က သင်သည် center, space-between, space-around, space-evenly တန်ဖိုးများကို လေ့လာပြီးဖြစ်သည်။ ယခု တန်ဖိုးအနည်းငယ်ကို ထပ်မံလေ့လာကြပါစို့။

flex-start တန်ဖိုးသည် အစိတ်အပိုင်းများကို အဓိကဝင်ရိုး၏ အစသို့ ကပ်စေပြီး၊ flex-end တန်ဖိုးသည် အဆုံးသို့ ကပ်စေပါသည်။ ဥပမာများဖြင့် ကြည့်ကြပါစို့။

ဥပမာ

flex-direction ဂုဏ်သတ္တိကို row ဟူ၍ သတ်မှတ်ခြင်းဖြင့် အဓိကဝင်ရိုးကို ဘယ်မှညာသို့ ညွှန်ကြားပါမည်။ ဘလောက်များကို ဝင်ရိုး၏အစသို့ ကပ်ပါမည်။ ဤအတွက် justify-content ကို flex-start တန်ဖိုးအဖြစ် သတ်မှတ်ပါမည်။

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

ကုဒ်အလုပ်လုပ်ခြင်း၏ ရလဒ်။

ဥပမာ

ယခု ဘလောက်များကို ဝင်ရိုး၏အဆုံးသို့ ကပ်ပါမည်။ ဤအတွက် justify-content ကို flex-end တန်ဖိုးအဖြစ် သတ်မှတ်ပါမည်။

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

ကုဒ်အလုပ်လုပ်ခြင်း၏ ရလဒ်။

ဥပမာ

ယခု အဓိကဝင်ရိုးကို ညာမှဘယ်သို့ ညွှန်ကြားပါမည်။ flex-direction ဂုဏ်သတ္တိကို row-reverse တန်ဖိုးသတ်မှတ်ခြင်းဖြင့် ပြုလုပ်သည်။ ဘလောက်များကို ဝင်ရိုး၏အစသို့ ဆိုလိုသည်မှာ ညာဘက်အစွန်းသို့ ကပ်ပါမည်။ ဤအတွက် justify-content ကို flex-start တန်ဖိုးအဖြစ် သတ်မှတ်ပါမည်။

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

ကုဒ်အလုပ်လုပ်ခြင်း၏ ရလဒ်။

ဥပမာ

ယခု ဘလောက်များကို အဓိကဝင်ရိုး၏အဆုံးသို့ ဆိုလိုသည်မှာ ဘယ်ဘက်အစွန်းသို့ ကပ်ပါမည်။ ဤအတွက် justify-content ကို flex-end တန်ဖိုးအဖြစ် သတ်မှတ်ပါမည်။

.parent {
	display: flex;
	flex-direction: row-reverse; /* အဓိကဝင်ရိုး ညာမှဘယ်သို့ */
	justify-content: flex-end; /* ဘလောက်များကို အဓိကဝင်ရိုး၏အဆုံးသို့ */
}

ကုဒ်အလုပ်လုပ်ခြင်း၏ ရလဒ်။

ဥပမာ

ယခင်ဥပမာများတွင် အဓိကဝင်ရိုးသည် အလျားလိုက်ဖြစ်ခဲ့သည်။ ယခု ၎င်းကို လှန်ပြီး ဒေါင်လိုက်ညွှန်ကြားပါမည်။

flex-direction ဂုဏ်သတ္တိကို column တန်ဖိုးသတ်မှတ်ခြင်းဖြင့် အဓိကဝင်ရိုးကို အောက်သို့ ညွှန်ကြားပါမည်။

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

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

ကုဒ်အလုပ်လုပ်ခြင်း၏ ရလဒ်။

ဥပမာ

ယခု ဘလောက်များကို အဓိကဝင်ရိုး၏အဆုံးသို့ ဆိုလိုသည်မှာ အောက်ခြေအစွန်းသို့ ကပ်ပါမည်။ ဤအတွက် justify-content ကို flex-end တန်ဖိုးအဖြစ် သတ်မှတ်ပါမည်။

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

ကုဒ်အလုပ်လုပ်ခြင်း၏ ရလဒ်။

ဥပမာ

အဓိကဝင်ရိုးကို လှန်ပြီး အောက်မှအထက်သို့ ညွှန်ကြားပါမည်။ ဤအတွက် flex-direction ဂုဏ်သတ္တိကို column-reverse ဟူ၍ သတ်မှတ်ပါမည်။ ဤကိစ္စတွင် ဘလောက်များသည် ၎င်းတို့၏ အစဉ်လိုက်ကို ပြောင်းလဲသွားမည် - ဝင်ရိုး၏အစတွင် HTML ကုဒ်ရှိ နောက်ဆုံးဘလောက်ရပ်နေမည်။

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

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

ကုဒ်အလုပ်လုပ်ခြင်း၏ ရလဒ်။

ဥပမာ

ဘလောက်များကို အဓိကဝင်ရိုး၏အဆုံးသို့ ဆိုလိုသည်မှာ ထိပ်ဆုံးအစွန်းသို့ ကပ်ပါမည်။ ဤအတွက် justify-content ကို flex-end တန်ဖိုးအဖြစ် သတ်မှတ်ပါမည်။

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

ကုဒ်အလုပ်လုပ်ခြင်း၏ ရလဒ်။

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

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