CSS ရှိ Flex ဘလောက်များ၏ အစီအစဉ်

အောက်ပါဘလောက်များ အတန်းလိုက် စီထားသည်ကို ယူဆပါစို့။

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

.parent {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 300px;
	height: 200px;
	border: 1px solid red;
}
.child {
	width: 50px;
	height: 50px;
	border: 1px solid green;
}

၎င်းတို့၏ HTML ကုဒ်အတွင်းရှိ အစီအစဉ်ကို မပြောင်းလဲဘဲ မျက်နှာပြင်ပေါ်တွင် ပြသသည့်အစီအစဉ်ကို ပြောင်းလဲကြည့်ပါ။

ဤအတွက် order ဟုခေါ်သော ဂုဏ်သတ္တိရှိပြီး၊ ၎င်းသည် အစုတ်တစ်ခုချင်းစီ၏ အစီအစဉ်ကို အောက်ပါစည်းမျဉ်းအတိုင်း သတ်မှတ်ပေးသည်- တန်ဖိုးကြီးသူသည် ဝင်ရိုး၏အဆုံးဘက်သို့ ပိုနီးစွာရပ်တည်ပြီး တန်ဖိုးငယ်သူသည် အစဘက်သို့ ပိုနီးစွာ ရပ်တည်သည်။

ဤဂုဏ်သတ္တိ၏ တန်ဖိုးသည် အပြုသဘော သို့မဟုတ် အပျက်သဘော ကိန်းဂဏန်းတစ်ခုဖြစ်နိုင်သည်။ ပုံသေအားဖြင့် အစုတ်အားလုံးသည် တစ်ခုပြီးတစ်ခု နောက်ကလိုက်သည်၊ ဆိုလိုသည်မှာ ၎င်းတို့၏ order သည် သုညဖြစ်သည်။

ကျွန်ုပ်တို့၏ အစုတ်များ၏ အစီအစဉ်ကို ပြောင်းလဲကြည့်ကြပါစို့။ ဤအတွက် ဒုတိယအစုတ်ကို elem အပိုအတန်းအမည်ပေးပြီး ထိုအတန်းအမည်အတွက် order ဂုဏ်သတ္တိကို တန်ဖိုး 1 အဖြစ် သတ်မှတ်ပါမည်။

.elem {
	order: 1;
	border: 1px solid red;
}

အစုတ်အားလုံးသည် ပုံသေအားဖြင့် အစီအစဉ် 0 ရှိမည်ဖြစ်ပြီး ကျွန်ုပ်တို့၏ ဒုတိယအစုတ်သည် အခြားအစုတ်များထက် ပိုမိုမြင့်မားသော အစီအစဉ်ရှိမည်ဖြစ်သောကြောင့် ၎င်းသည် ၎င်းတို့ထက် နောက်မှ တည်ရှိမည်ဖြစ်သည်။

ယခု အပျက်သဘော တန်ဖိုး -1 ကို သတ်မှတ်ကြည့်ပါစို့။

.elem {
	order: -1;
	border: 1px solid red;
}

ဤကိစ္စတွင် ကျွန်ုပ်တို့၏ ဘလောက်သည် ဝင်ရိုး၏ အစဘက်သို့ ရွေ့သွားမည်ဖြစ်သည်။

ဝင်ရိုး၏ မတူညီသော ဦးတည်ချက်များအတွက် ဤဂုဏ်သတ္တိ၏ အလုပ်လုပ်ပုံကို သီးသန့်စမ်းကြည့်ပါ။