CSS ရှိ Flexbox များဖြင့် အကွက်များ တည်ဆောက်ခြင်း

ယခု Flexbox များဖြင့် အကွက်များ တည်ဆောက်နည်းကို လေ့လာကြပါစို့။ ပထမဦးစွာ flex ဘလောက်များကို တန်းသုံးတန်း၊ ဘလောက်သုံးခုစီဖြင့် စီစဉ်ပါမည်။

ဤသို့ပြုလုပ်ရန် flex များ၏ မိဘအစိတ်အပိုင်းအတွက် အကျယ်ကို 300px နှင့် flex-wrap ပိုင်တန်ဖိုးကို wrap အဖြစ် သတ်မှတ်ပါ။ ထို့နောက် ကလေးအစိတ်အပိုင်းများအတွက် အကျယ်ကို 100px သတ်မှတ်ပါ။

<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 class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
	<div class="child">9</div>
</div>

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 300px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

ယခု ကျွန်ုပ်တို့၏ ဘလောက်များကြားရှိ ရေပြင်ညီ အကွာအဝေးကို ပြုလုပ်ကြပါစို့။ ဤသို့ပြုလုပ်ရန် အတွင်းပိုင်းအကွာအဝေးအတွက် နေရာအပိုရရှိရန် မိဘအစိတ်အပိုင်း၏ အကျယ်ကို တိုးချဲ့ပါမည်။

ကျွန်ုပ်တို့တွင် တန်းတစ်တန်းလျှင် ဘလောက်သုံးခုရှိသည့်အတွက် ၎င်းတို့ကြားတွင် ကြားနေရာနှစ်ခု ရှိသည်။ ကြားနေရာတစ်ခုစီ၏ အကျယ်သည် 10px ရှိစေလိုသည်ဆိုပါစို့။ ထိုသို့ဆိုလျှင် မိဘအစိတ်အပိုင်း၏ အကျယ်ကို 20px တိုးချဲ့ရမည်၊ ဆိုလိုသည်မှာ 300px မဟုတ်ဘဲ 320px သတ်မှတ်ရမည်။

ယခု ဘလောက်များ၏ မိဘအစိတ်အပိုင်းအား justify-content ပိုင်တန်ဖိုးကို space-between အဖြစ် သတ်မှတ်ပြီး ဘလောက်များကြား လိုချင်သောအကွာအဝေးကို ရယူကြပါစို့။

<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 class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
	<div class="child">9</div>
</div>

.parent {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 320px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

ယခု ဘလောက်များကြားရှိ ဒေါင်လိုက်အကွာအဝေးကိုလည်း ထပ်မံပေါင်းထည့်ကြပါစို့။ ဤသို့ပြုလုပ်ရန် align-content ပိုင်ကို space-between တန်ဖိုးဖြင့် သတ်မှတ်နိုင်သည်။

သို့ရာတွင် ဤသို့ပြုလုပ်ရန် မိဘအစိတ်အပိုင်း၏ အမြင့်ကို သတ်မှတ်ပေးရမည်၊ မဟုတ်လျှင် align-content သည် အလုပ်မလုပ်ပါ။ အမြင့်ကို 320px သတ်မှတ်ပါစို့။ ဤသို့ဆိုလျှင် 100px အမြင့်ရှိသော ဘလောက်များပါဝင်သည့် တန်းသုံးတန်းနှင့် 10px ရှိသော တန်းများကြားရှိ ကြားနေရာနှစ်ခုအတွက် နေရာအပြည့်အဝ ရရှိမည်ဖြစ်သည်။

ဖွင့်လှစ်ကြည့်ရှုကြပါစို့။

<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 class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
	<div class="child">9</div>
</div>

.parent {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-content: space-between;
	flex-wrap: wrap;
	width: 320px;
	height: 320px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

အားလုံးအလွန်ကောင်းမွန်စွာ အလုပ်လုပ်နေသည်၊ သို့ရာတွင် နောက်လာမည့် သင်ခန်းစာတွင် ကြည့်ရှုသွားမည့် ပြဿနာအချို့ရှိပါသည်။