CSS flex 属性

  • အရှေ့လိုက်ပိုင်း filter
  • နောက်လိုက်ပိုင်း flex-basis

အသုံးပြုခြင်း နှင့် ကြောင်းဆိုခြင်း

flex သည် အောက်ပါ ဗဟုသုတ နှင့် အသုံးပြုခြင်း:

flex သည် လျှဲပြား စနစ် အရ ပြားရှည်ထားခြင်း ကို စစ်ဆေးသည်。

မှတ်ချက်:အရာသည် လျှဲပြား စနစ် မဟုတ် လျှင် flex သည် မမှန်ကန်ချေ。

အခြား ကိုးကားချက်:

ပြဋ္ဌာန်းချက်: CSS 弹性框

参考：CSS flex-basis 属性

参考：CSS flex-direction 属性

参考：CSS flex-flow 属性

参考：CSS flex-grow 属性

参考：CSS flex-shrink 属性

参考：CSS flex-wrap 属性

参考：HTML DOM flex 属性

实例

အရာ သို့မဟုတ် အကြွင်းကြွင်း အခြား အရာ သို့မဟုတ် ဖြစ်ပေါ်စေသော အခြား အရာ ကို ကြည့်ပါ

#main div {
  -ms-flex: 1; /* IE 10 */ 
  flex: 1;
}

ကိုယ်တိုင် ကြိုးစားကြည့်တော့ပါ

CSS ဘာသာ

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

အခြေခံ အရ

အရ ဖော်ပြ
flex-grow အမှတ် - အကြောင်းအရာ ကို ကျန်ရှိသော အကြောင်းအရာ နှင့် နှိုင်းယှဉ် ပြီး ဖြိုးတင်
flex-shrink အမှတ် - အကြောင်းအရာ ကို ကျန်ရှိသော အကြောင်းအရာ နှင့် နှိုင်းယှဉ် ပြီး သွင်းသုံး
flex-basis

အကြောင်းအရာ အကွာအဝေး

အခွင့်အရေး အမှတ် - "auto"、"inherit" သို့မဟုတ် အဆင့် "%"、"px"、"em" သို့မဟုတ် အခြား အညွှန်း အဆင့်
auto အမှတ် 1 1 auto
initial အမှတ် 0 0 auto နှင့် ညှိနှိုင်း initial。
none အမှတ် 0 0 auto နှင့် ညှိနှိုင်း
inherit ပြုပြင် ဖြစ်ပါတယ် - ဖြစ်ပေါ်စေသော အခြေခံ အကိုးအကာ ကို ကြည့်တော့ပါ inherit。

နည်းပါး အချက်

မူကြမ်း အရ 0 1 auto
သဘောပြော မဟုတ်
လှည့်မှု ပြုလုပ် ကူးကြမ်းထားသည် - အခြား အခြေခံ အကိုးအကာ ကို ကြည့်တော့ပါ - ကျမ်းကျိန်းလှည့်မှု ဖြစ်ပေါ်စေသော အခြေခံ အကိုးအကာ。
ပုံစံ CSS3
JavaScript ဘာသာ object.style.flex="1"

အခြား အမှတ်သုံး

flex နှင့် အပြန်အလွှတ် အစီအစဉ်ကို အသုံးပြု၍ မတူညီသော အစိတ်အခံ အရာ သို့မဟုတ် အက်ိုးကျဉ်းခံနေသော အက်ိုးကျဉ်းခံနေသော အရာ အတွက် အခြား ပြင်ဆင် များ ကို ဖွဲ့စည်းပေးပါ

.flex-container {
  display: flex;
  flex-wrap: wrap;
}
.flex-item-left {
  flex: 50%;
}
.flex-item-right {
  flex: 50%;
}
/* အပြန်အလွှတ် ပြင်ဆင် - တစ်လျှောက် ပြင်ဆင် (100％) သို့မဟုတ် နှစ်လျှောက် ပြင်ဆင် (50％) */
@media (max-width: 800px) {
  .flex-item-right, .flex-item-left {
    flex: 100%;
  }
}

ကိုယ်တိုင် ကြိုးစားကြည့်တော့ပါ

ဘာသာပြန် ကူးကြမ်း

စာတမ်းအရ အမှတ်သုံးထားသော အမှတ်သည် အခြေခံ ဘာသာပြန် သည် အထူး ကူးကြမ်း ပြီး အသုံးပြုထားသော ပထမဆုံး ဘာသာပြန် ဖြစ်သည့် ဘာသာပြန် ကို ညွှန်ပြသည်。

နည်းပါး -webkit-、-ms- သို့မဟုတ် -moz- ဖြင့် အမှတ်သုံးထားသော နည်းပါး သည် အသုံးပြုထားသော ပထမဆုံး ပုံစံဖြစ်သည်。

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0
10.0 -ms-		 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0
  • အရှေ့လိုက်ပိုင်း filter
  • နောက်လိုက်ပိုင်း flex-basis