CSS ကို အကြောင်းပြ-အကြောင်းအရာ ပိုင်ဆိုင်မှု
ဥပမာ
ကွန်တိန်နာ၏အလယ်ဗဟိုတွင် flex အရာများကို ချိန်ညှိပါ-
div
{
display: flex;
justify-content: center;
}
အောက်တွင် နောက်ထပ် "စမ်းသုံးကြည့်ပါ" ဥပမာများ။
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
justify-content
ပစ္စည်းများသည် ပင်မဝင်ရိုးပေါ်ရှိ နေရာအားလုံး (အလျားလိုက်) ကို အသုံးမပြုသောအခါတွင် ပစ္စည်းသည် ပြောင်းလွယ်ပြင်လွယ်ရှိသော ကွန်တိန်နာ၏ပစ္စည်းများကို ချိန်ညှိပေးပါသည် ။
အကြံပြုချက်- အရာများကို ဒေါင်လိုက်ချိန်ညှိ ရန် align-items ပိုင်ဆိုင်မှုကို အသုံးပြု ပါ။
မူလတန်ဖိုး: | flex-စတင် |
---|---|
အမွေဆက်ခံသည်- | မဟုတ်ဘူး |
သက်ဝင်လှုပ်ရှားနိုင်သော | မဟုတ်ဘူး ကာတွန်း အကြောင်းဖတ်ပါ။ |
ဗားရှင်း- | CSS3 |
JavaScript syntax- | အရာဝတ္ထု .style.justifyContent="space-between" |
Browser ပံ့ပိုးမှု
ဇယားရှိ နံပါတ်များသည် ပိုင်ဆိုင်မှုကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးသည်။
-webkit- သို့မဟုတ် -moz- ဖြင့်လိုက်သောနံပါတ်များကို ရှေ့ဆက်တွဲဖြင့်လုပ်ဆောင်သော ပထမဆုံးဗားရှင်းကို သတ်မှတ်ပေးသည်။
Property | |||||
---|---|---|---|---|---|
justify-content | 29.0 21.0 -webkit- |
11.0 | 28.0 18.0 -moz- |
9.0 6.1 -webkit- |
17.0 |
CSS Syntax
justify-content: flex-start|flex-end|center|space-between|space-around|space-evenly|initial|inherit;
အိမ်ခြံမြေတန်ဖိုးများ
Value | Description | Play it |
---|---|---|
flex-start | Default value. Items are positioned at the beginning of the container | |
flex-end | Items are positioned at the end of the container | |
center | Items are positioned in the center of the container | |
space-between | Items will have space between them | |
space-around | Items will have space before, between, and after them | |
space-evenly | Items will have equal space around them | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
နောက်ထပ် ဥပမာများ
ဥပမာ
ကွန်တိန်နာ၏အစတွင် flex အရာများကို ချိန်ညှိပါ (၎င်းသည် မူရင်းဖြစ်သည်)
div
{
display: flex;
justify-content: flex-start;
}
ဥပမာ
ကွန်တိန်နာ၏အဆုံးတွင် flex အရာများကို ချိန်ညှိပါ-
div
{
display: flex;
justify-content: flex-end;
}
ဥပမာ
မျဉ်းကြောင်းများကြားတွင် နေရာလွတ်ဖြင့် ပျော့ပြောင်းသည့်အရာများကို ပြသပါ-
div
{
display: flex;
justify-content: space-between;
}
ဥပမာ
မျဉ်းကြောင်းများရှေ့၊ အကြား၊ နှင့် နောက်တွင် နေရာလွတ်များဖြင့် ပျော့ပြောင်းသည့်အရာများကို ပြသပါ-
div
{
display: flex;
justify-content: space-around;
}
ဆက်စပ်စာမျက်နှာများ
CSS အကိုးအကား- ညှိ-အကြောင်းအရာ ပိုင်ဆိုင်မှု
CSS ရည်ညွှန်းချက်- align-items ပိုင်ဆိုင်မှု
CSS အကိုးအကား- align-self ပိုင်ဆိုင်မှု
HTML DOM ရည်ညွှန်း- justifyContent ပိုင်ဆိုင်မှု