စီစ်ကုံးသုံးရန် စီစ်ကုံး flex-direction အချက်အလက်

  • အရှေ့လိုက်သော စာကြိုး flex-basis
  • နောက်လိုက်သော စာကြိုး flex-flow

ဒီပုံစံ နှင့် အသုံးပြုခြင်း

flex-direction လက်ခံမှု အကိုးအချုပ် အရ ဖားလုံး လျှောက်ချက် အခြေအနေ ကို ချမှတ်သည်။

ဖော်ပြချက်:အရာသည် ပြောင်းလဲကြောင်း မဟုတ် ဆိုက်ပျံလျှင် ဖားလုံး လုပ်ဆောင် မရှိပါ။

အခြား ကျွန်ုပ်ကို ကြိုးစားပါ

CSS ပြန်လည်တင်းချက်CSS အော်ဂန်တီ

CSS ပြန်လည်တင်းချက်flex အချက်

CSS ပြန်လည်တင်းချက်flex-basis အချက်

CSS ပြန်လည်တင်းချက်flex-flow အချက်

CSS ပြန်လည်တင်းချက်flex-grow အချက်

CSS ပြန်လည်တင်းချက်flex-shrink အချက်

CSS ပြန်လည်တင်းချက်flex-wrap အချက်

HTML DOM ပြန်လည်တင်းချက်flexDirection အချက်

အမျိုးအစား

div အရွယ်တွင် အသားတိုက် ကို အစီးအကျယ် ကန်တူပြီး ပြောင်းလဲမှုကို ပြင်ဆင်ပါ

div {
  display: flex;
  flex-direction: row-reverse; 
}

ကိုယ်တိုင် ကျင်းပပါ

CSS ဘာသာ

flex-direction: row|row-reverse|column|column-reverse|initial|inherit;

အချက်

ပြင်ပ ဖော်ပြ
row မူးယစ်
row-reverse အစီးအကျယ် လက်တွေ့ အစီးအကျယ် မဟုတ် မှာ အစီးအကျယ်မှ ကန်တူပါ
column အစီးအကျယ် အထိ ဖွဲ့စည်းပါ
column-reverse အစီးအကျယ် လက်တွေ့ အစီးအကျယ် မဟုတ် မှာ အစီးအကျယ်မှ ကန်တူပါ
initial အခြေခံ အက်အက် သုံးပါ initial。
inherit အခြေခံ ဘာသာပြန် မှ အက်အက် သုံးပြီး သတ္တိပေးပါ inherit。

နည်းပါးဆိုင်သော အချက်

မူးယစ် row
အသုံးပြု မဟုတ်
အသံသုံး ဖန်တီးမှု ကူးကြောင်းမရှိပါ၊ ကျွန်ုပ်တို့က ကျွန်ုပ်တို့ကို ကြိုးစားပါအသံသုံး ပုံစံ。
ပုံစံ CSS3
JavaScript ဘာသာ object.style.flexDirection="column-reverse"

အခြား အမျိုးအစား

flex-direction နှင့် ပြောင်းလဲမှုပိုင်းဆိုင်သော ကျောက်စာများ ကို အသုံးပြုလျက် မတူညီသော အနောက်ပိုင်း/ပစ္စည်း အရွယ် အစားအသတ် အတွက် မတူညီသော ပုံစံများ ကို ဖွဲ့စည်းပါ

.flex-container {
  display: flex;
  flex-direction: row;
}
/* ပြောင်းလဲမှုပိုင်းဆိုင်သော ပုံစံ - နှစ်လက်ပွဲစား မဟုတ် ကား တစ်လက်ပွဲစား (100％) အထိ ဖွဲ့စည်းပါ */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}

ကိုယ်တိုင် ကျင်းပပါ

ဘာသာပြန် ကူးကြောင်း

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

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

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0
  • အရှေ့လိုက်သော စာကြိုး flex-basis
  • နောက်လိုက်သော စာကြိုး flex-flow