CSS flex ပိုင်ဆိုင်မှု
ဥပမာ
လိုက်လျောညီထွေရှိသော အရာများအားလုံးသည် ၎င်း၏အကြောင်းအရာကို မခွဲခြားဘဲ အရှည်တူညီပါစေ-
#main div {
-ms-flex: 1; /* IE 10 */
flex: 1;
}
အကြံပြုချက်- အောက်ပါ "သင်ကိုယ်တိုင် ကြိုးစားပါ" နောက်ထပ် ဥပမာများ။
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
ပိုင်ဆိုင်မှုသည် အောက်ပါ flex
တို့အတွက် အတိုကောက်ပိုင်ဆိုင်မှုတစ်ခုဖြစ်သည်။
ပိုင်ဆိုင်မှု သည် flex
ပြောင်းလွယ်ပြင်လွယ်ရှိသော အရှည်ကို လိုက်လျောညီထွေရှိသော အရာများပေါ်တွင် သတ်မှတ်ပေးသည်။
မှတ်ချက်- ဒြပ်စင်သည် ပြောင်းလွယ်ပြင်လွယ်ရှိသော အရာမဟုတ်ပါက၊ flex
ပိုင်ဆိုင်မှုသည် အကျိုးသက်ရောက်မှု မရှိပါ။
မူလတန်ဖိုး: | 0 1 အော်တို |
---|---|
အမွေဆက်ခံသည်- | မဟုတ်ဘူး |
သက်ဝင်လှုပ်ရှားနိုင်သော | ဟုတ်ကဲ့၊ တစ်ဦးချင်းဂုဏ်သတ္တိများကိုကြည့်ပါ ။ ကာတွန်း အကြောင်းဖတ်ပါ။ |
ဗားရှင်း- | CSS3 |
JavaScript syntax- | အရာဝတ္ထု .style.flex="1" |
Browser ပံ့ပိုးမှု
ဇယားရှိ နံပါတ်များသည် ပိုင်ဆိုင်မှုကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးသည်။
-webkit-၊ -ms- သို့မဟုတ် -moz- ဖြင့်လိုက်သောနံပါတ်များကို ရှေ့ဆက်တွဲဖြင့်လုပ်ဆောင်သော ပထမဆုံးဗားရှင်းကို သတ်မှတ်ပေးသည်။
Property | |||||
---|---|---|---|---|---|
flex | 29.0 21.0 -webkit- |
11.0 10.0 -ms- |
28.0 18.0 -moz- |
9.0 6.1 -webkit- |
17.0 |
CSS Syntax
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;
အိမ်ခြံမြေတန်ဖိုးများ
Value | Description |
---|---|
flex-grow | A number specifying how much the item will grow relative to the rest of the flexible items |
flex-shrink | A number specifying how much the item will shrink relative to the rest of the flexible items |
flex-basis | The length of the item. Legal values: "auto", "inherit", or a number followed by "%", "px", "em" or any other length unit |
auto | Same as 1 1 auto. |
initial | Same as 0 1 auto. Read about initial |
none | Same as 0 0 auto. |
inherit | Inherits this property from its parent element. Read about inherit |
နောက်ထပ် ဥပမာများ
ဥပမာ
မတူညီသော မျက်နှာပြင်အရွယ်အစား/စက်ပစ္စည်းများအတွက် မတူညီသော အပြင်အဆင်တစ်ခုဖန်တီးရန် မီဒီယာမေးမြန်းချက်များflex
နှင့် တွဲ သုံး ခြင်း-
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item-left {
flex: 50%;
}
.flex-item-right {
flex: 50%;
}
/* Responsive layout - makes a one column layout (100%) instead of a two-column
layout (50%) */
@media (max-width: 800px) {
.flex-item-right,
.flex-item-left {
flex: 100%;
}
}
ဆက်စပ်စာမျက်နှာများ
CSS သင်ခန်းစာ- CSS Flexible Box
CSS ရည်ညွှန်းချက်- flex-basis ပိုင်ဆိုင်မှု
CSS ရည်ညွှန်းချက်- flex-direction ပိုင်ဆိုင်မှု
CSS ရည်ညွှန်းချက်- flex-flow ပိုင်ဆိုင်မှု
CSS ရည်ညွှန်းချက်- flex-grow ပိုင်ဆိုင်မှု
CSS ရည်ညွှန်းချက်- flex-shrink ပိုင်ဆိုင်မှု
CSS ရည်ညွှန်းချက်- flex-wrap ပိုင်ဆိုင်မှု
HTML DOM ရည်ညွှန်းချက်- flex ပိုင်ဆိုင်မှု