CSS Flex ကွန်တိန်နာ
မိဘဒြပ်စင် (ကွန်တိန်နာ)
ယခင်အခန်းတွင် ကျွန်ုပ်တို့သတ်မှတ်ထားသည့်အတိုင်း၊ ဤအရာသည် flex သုံးခုပါသည့် flex container ( အပြာရောင်ဧရိယာ) ဖြစ်သည် ။
၁
၂
၃
flex container သည် displayပိုင်ဆိုင်မှုကို
flexသတ်မှတ်ခြင်း ဖြင့် ပြောင်းလွယ်ပြင်လွယ်ဖြစ်လာသည်
ဥပမာ
.flex-container {
display: flex;
}
flex container ဂုဏ်သတ္တိများမှာ-
flex-direction Property
ပိုင်ဆိုင်မှု သည် flex-directionကွန်တိန်နာသည် ပျော့ပျောင်းသည့်အရာများကို ပေါင်းစည်းလိုသည့် ဦးတည်ချက်ကို သတ်မှတ်သည်။
၁
၂
၃
ဥပမာ
columnတန်ဖိုးသည် flex ပစ္စည်းများကို ဒေါင်လိုက် (အပေါ်မှအောက်ခြေအထိ) တွဲထားသည် ။
.flex-container {
display: flex;
flex-direction: column;
}
ဥပမာ
တန်ဖိုး သည် column-reverseflex items များကို ဒေါင်လိုက် စီထားသည် (သို့သော် အောက်ခြေမှ အပေါ်မှ)
.flex-container {
display: flex;
flex-direction: column-reverse;
}
ဥပမာ
တန်ဖိုး သည် rowပျော့ပျောင်းသည့်အရာများကို အလျားလိုက် (ဘယ်မှညာ) တွင်စုထားသည်။
.flex-container {
display: flex;
flex-direction: row;
}
ဥပမာ
တန်ဖိုး သည် row-reverseပျော့ပျောင်းသည့်အရာများကို အလျားလိုက် (သို့သော်လည်း ညာဘက်မှ ဘယ်ဘက်)
.flex-container {
display: flex;
flex-direction: row-reverse;
}
flex-wrap အိမ်ခြံမြေ
ပိုင်ဆိုင်မှု သည် flex-wrapပျော့ပျောင်းသည့်အရာများကို ထုပ်ပိုးသင့်သည်ဖြစ်စေ မပတ်သင့်ဟု သတ်မှတ်သည်။
အောက်ဖော်ပြပါနမူနာများတွင်
flex-wrapပစ္စည်းဥစ္စာပိုင်ဆိုင်မှုကို ပိုမိုကောင်းမွန်စွာ သရုပ်ပြရန် flex items 12 ခုရှိသည်။
၁
၂
၃
၄
၅
၆
၇
၈
၉
၁၀
၁၁
၁၂
ဥပမာ
တန်ဖိုး သည် wrapလိုအပ်ပါက flex items များကို ထုပ်ပိုးမည်ဟု သတ်မှတ်သည်-
.flex-container {
display: flex;
flex-wrap: wrap;
}
ဥပမာ
တန်ဖိုး သည် nowrapflex အရာများကို ထုပ်ပိုးမည်မဟုတ်ကြောင်း သတ်မှတ်သည် (၎င်းသည် မူရင်းဖြစ်သည်-
.flex-container {
display: flex;
flex-wrap: nowrap;
}
ဥပမာ
တန်ဖိုး သည် wrap-reverseလိုအပ်ပါက ပြောင်းလွယ်ပြင်လွယ်ရှိသော အရာများကို ပြောင်းပြန်ဖြင့် ထုပ်ပေးမည်ဟု သတ်မှတ်သည်-
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
flex-flow Property
flex-flowProperty သည်
flex-directionနှင့်
flex-wrapProperties နှစ်ခုလုံးကို သတ်မှတ်ရန်အတွက် လက် တိုပိုင်ဆိုင်မှုတစ်ခုဖြစ်သည်။
ဥပမာ
.flex-container {
display: flex;
flex-flow: row wrap;
}
အကြောင်းပြ-အကြောင်းအရာ ပိုင်ဆိုင်မှု
justify-contentflex အရာများကို ချိန်ညှိရန် ပိုင်ဆိုင်မှုကို အသုံးပြုသည် -
၁
၂
၃
ဥပမာ
centerတန်ဖိုးသည် ကွန်တိန်နာ၏အလယ်ဗဟိုရှိ flex အရာများကို ချိန်ညှိသည် -
.flex-container {
display: flex;
justify-content: center;
}
ဥပမာ
တန်ဖိုးသည် ကွန်တိန်နာ ၏အ flex-startစရှိ flex အရာများကို ချိန်ညှိပေးသည် (၎င်းသည် မူရင်းဖြစ်သည်-
.flex-container {
display: flex;
justify-content: flex-start;
}
ဥပမာ
တန်ဖိုးသည် ကွန်တိန်နာ ၏အ flex-endဆုံးရှိ flex အရာများကို ချိန်ညှိသည်-
.flex-container {
display: flex;
justify-content: flex-end;
}
ဥပမာ
တန်ဖိုး သည် space-aroundမျဉ်းများရှေ့၊ ကြား၊ နှင့် နောက်တွင် နေရာလွတ်ဖြင့် flex items ကို ပြသည်-
.flex-container {
display: flex;
justify-content: space-around;
}
ဥပမာ
တန်ဖိုး သည် space-betweenမျဉ်းကြောင်းများကြားတွင် နေရာလွတ်ဖြင့် flex အရာများကို ပြသသည်-
.flex-container {
display: flex;
justify-content: space-between;
}
align-items Property
align-itemsflex items များကို ချိန်ညှိရန် ပိုင်ဆိုင်မှုကို အသုံးပြုသည် ။
၁
၂
၃
ဤဥပမာများတွင် ကျွန်ုပ်တို့သည် ပစ္စည်းဥစ္စာပိုင်ဆိုင်မှုကို ပိုမိုကောင်းမွန်စွာပြသရန် 200 pixels မြင့်သောကွန်တိန်နာကို အသုံးပြု
align-itemsပါသည်။
ဥပမာ
တန်ဖိုး သည် centerကွန်တိန်နာအလယ်ရှိ flex အရာများကို ချိန်ညှိသည်-
.flex-container {
display: flex;
height: 200px;
align-items: center;
}
ဥပမာ
တန်ဖိုးသည် ကွန်တိန်နာ ၏ flex-startထိပ်ရှိ flex အရာများကို ချိန်ညှိသည်-
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
}
ဥပမာ
တန်ဖိုးသည် ကွန်တိန်နာ ၏ flex-endအောက်ခြေရှိ flex အရာများကို ချိန်ညှိသည်-
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
}
ဥပမာ
တန်ဘိုး သည် stretchကွန်တိန်နာကိုဖြည့်ရန် flex items များကို ဆန့်သည် (၎င်းသည် ပုံသေဖြစ်သည်)
.flex-container {
display: flex;
height: 200px;
align-items: stretch;
}
ဥပမာ
တန်ဖိုး သည် baseline၎င်းတို့၏ အခြေခံမျဉ်းများ ချိန်ညှိခြင်းကဲ့သို့သော flex အရာများကို ချိန်ညှိသည်-
.flex-container {
display: flex;
height: 200px;
align-items: baseline;
}
မှတ်ချက် ။
1
2
3
align-content Property
align-contentflex လိုင်းများကို ချိန်ညှိရန် ပိုင်ဆိုင်မှုကို အသုံးပြုသည် ။
၁
၂
၃
၄
၅
၆
၇
၈
၉
၁၀
၁၁
၁၂
ဤနမူနာများတွင် ကျွန်ုပ်တို့သည်
flex-wrapပစ္စည်းဥစ္စာပိုင်ဆိုင်မှု wrapကို ပိုမိုကောင်းမွန်စွာပြသနိုင်ရန် 600 pixels မြင့်သောကွန်တိန်နာကို အသုံးပြု align-contentပါသည်။
ဥပမာ
တန်ဖိုးသည် ၎င်းတို့ space-betweenကြားရှိ မျဉ်းတန်းများကို တူညီသောနေရာလွတ်ဖြင့် ပြသသည်-
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
}
ဥပမာ
တန်ဖိုးသည် ၎င်းတို့ space-aroundရှေ့၊ ကြား၊ နှင့် နောက်တွင် နေရာလွတ်များဖြင့် flex မျဉ်းများကို ပြသသည်-
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-around;
}
ဥပမာ
ကျန်ရှိသော stretchနေရာကိုယူရန် တန်ဖိုးသည် flex မျဉ်းများကို ဆန့်သည် (၎င်းသည် ပုံသေဖြစ်သည်)။
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: stretch;
}
ဥပမာ
တန်ဖိုးသည် ကွန်တိန်နာ ၏အ centerလယ်ရှိ flex မျဉ်းများကို ပြသသည်-
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;
}
ဥပမာ
flex-startတန်ဖိုးသည် ကွန်တိန်နာ၏အစတွင် flex လိုင်းများကို ပြသသည် -
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-start;
}
ဥပမာ
တန်ဖိုး သည် flex-endကွန်တိန်နာ၏အဆုံးတွင် flex လိုင်းများကို ပြသသည်-
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-end;
}
ပြီးပြည့်စုံသောဗဟိုပြုခြင်း။
အောက်ဖော်ပြပါ ဥပမာတွင် ကျွန်ုပ်တို့သည် အလွန်အသုံးများသော စတိုင်ပြဿနာကို ဖြေရှင်းနိုင်သည်- ပြီးပြည့်စုံသော ဗဟိုချုပ်ကိုင်မှု။
ဖြေရှင်းချက်-justify-content နှင့် align-itemsဂုဏ်သတ္တိ
နှစ်ခုလုံးကို သတ်မှတ်ပါ center၊ နှင့် ပျော့ပျောင်းသည့်အရာအား ပြီးပြည့်စုံစွာ ဗဟိုပြုပါမည်-
ဥပမာ
.flex-container {
display: flex;
height: 300px;
justify-content:
center;
align-items: center;
}
CSS Flexbox Container Properties
အောက်ပါဇယားသည် CSS Flexbox Container ဂုဏ်သတ္တိများအားလုံးကို စာရင်းပြုစုထားသည်။
| Property | Description |
|---|---|
| align-content | Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines |
| align-items | Vertically aligns the flex items when the items do not use all available space on the cross-axis |
| display | Specifies the type of box used for an HTML element |
| flex-direction | Specifies the direction of the flexible items inside a flex container |
| flex-flow | A shorthand property for flex-direction and flex-wrap |
| flex-wrap | Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line |
| justify-content | Horizontally aligns the flex items when the items do not use all available space on the main-axis |