CSS Flex တုံ့ပြန်မှု
တုံ့ပြန်မှု Flexbox
မတူညီသော မျက်နှာပြင်အရွယ်အစားနှင့် စက်များအတွက် မတူညီသော အပြင်အဆင်များဖန်တီးရန် မီဒီယာမေးမြန်းချက်များကို အသုံးပြုနိုင် သည့် CSS Media Queries အခန်းမှ သင်သင်ယူ ခဲ့ပါသည်။
လက်ပ်တော့နှင့် ဒက်စ်တော့များ-
မိုဘိုင်းလ်ဖုန်းများ
တက်ဘလက်များဥပမာအားဖြင့်၊ သင်သည် စခရင်အရွယ်အစားအများစုအတွက် ကော်လံနှစ်ခုအပြင်အဆင်ကို ဖန်တီးလိုပါက၊ သေးငယ်သောစခရင်အရွယ်အစား (ဖုန်းနှင့် တက်ဘလက်များကဲ့သို့) အတွက် ကော်လံတစ်ခုအပြင်အဆင်ကို ဖန်တီးလိုပါက၊ သင်သည်
သတ်မှတ်ထားသော breakpoint (800px ရှိ 800px) flex-direction
သို့ row
ပြောင်းလဲ နိုင်သည်။ column
အောက်ပါ ဥပမာ-
ဥပမာ
.flex-container {
display: flex;
flex-direction: row;
}
/* Responsive layout - makes a one column layout instead of a two-column
layout */
@media (max-width: 800px) {
.flex-container {
flex-direction: column;
}
}
အခြားနည်းလမ်းမှာ flex
မတူညီသော စခရင်အရွယ်အစားအတွက် မတူညီသော အပြင်အဆင်များဖန်တီးရန် flex items ၏ ပိုင်ဆိုင်မှုရာခိုင်နှုန်းကို ပြောင်းလဲရန်ဖြစ်သည်။ flex-wrap: wrap;
ဤနမူနာလုပ်ဆောင်ရန်အတွက် ကျွန်ုပ်တို့သည် flex container တွင် ထည့်သွင်းရန် လိုအပ်ကြောင်း သတိပြုပါ ။
ဥပမာ
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item-left {
flex: 50%;
}
.flex-item-right {
flex: 50%;
}
/* Responsive layout - makes a one column layout instead of a two-column
layout */
@media (max-width: 800px) {
.flex-item-right,
.flex-item-left {
flex: 100%;
}
}
Flexbox ကို အသုံးပြု၍ တုံ့ပြန်မှုရှိသော ရုပ်ပုံပြခန်း
မျက်နှာပြင်အရွယ်အစားပေါ် မူတည်၍ မျက်နှာပြင်အရွယ်အစားပေါ် မူတည်၍ လေး၊ နှစ်ပုံ သို့မဟုတ် အကျယ်အပြည့်ပုံများကြား ကွဲပြားသည့် တုံ့ပြန်မှုရှိသော ရုပ်ပုံပြခန်းကို ဖန်တီးရန် flexbox ကို အသုံးပြုပါ-
Flexbox ကို အသုံးပြု၍ တုံ့ပြန်မှုရှိသော ဝဘ်ဆိုဒ်
ပြောင်းလွယ်ပြင်လွယ် လမ်းကြောင်းပြဘားနှင့် လိုက်လျောညီထွေရှိသော အကြောင်းအရာများ ပါဝင်သော တုံ့ပြန်မှုရှိသော ဝဘ်ဆိုက်တစ်ခုကို ဖန်တီးရန် flexbox ကို အသုံးပြုပါ-