စက်တင် place-self အကိုးအချုပ်

ဒီအချက်အလက် နှင့် အသုံးပြုခြင်း

place-self အချက်အလက် သည် တစ်ခုခုတွင် အခြေအား နှင့် အခြေအား တူးပေးရန် အသုံးပြုသော အချက်အလက် ဖြစ်ပြီး အဆိုပါ အချက်အလက်များ အဆိုပါ အချက်အလက် ကို ကျပ်တင်းဖြင့် အသုံးပြုသည်

• align-self
• justify-self

အသုံးပြုလား အချက်အလက် ကို နှစ်ခု ရှိသောကြောင်း

place-self: start center;

• align-self အချက်အလက် ကို 'start' ဖြစ်စေသည်
• justify-self အချက်အလက် ကို 'center' ဖြစ်စေသည်

အသုံးပြုလား အချက်အလက် ကို တစ်ခုတည်း ရှိသောကြောင်း

place-self: end;

• အသုံးပြုလား နှင့် အသုံးပြုလား အချက်အလက် ကို 'end' ဖြစ်စေသည်

အမှုထမ်း

အမှတ် 1

တစ်ခုခုတွင် စစ်ဆင်ရာ နေရာမှ အခြေအား နှင့် အခြေအား အပေါ် တူးပေးရန်:

#myDiv {
  place-self: end;
}

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

အမှတ် 2: အသုံးပြုခြင်း ပုံ

အကျယ်ဝန်း <div> အရာ၏ writing-mode အခြေအား လက်ခံသည် 'vertical-rl' အချက်အလက် ဖြစ်ပါက နေရာ စက္ခု လေးပါး သည် စစ်ဆင်ရာ နေရာမှ အရှေ့ဘက်သို့ ပြောင်းလဲ၍ အခြေအား နေရာမှ အရှေ့ဘက်သို့ ပြောင်းလဲသည်:

#contianer {
  display: grid;
  writing-mode: vertical-rl;
}
#myDiv {
  place-self: end;
}

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

例子 3：弹性盒布局

place-self 属性也可以用于弹性盒布局项目，但 justify-self အခြေအနေ မှ နောက်ဆုံး အချက် ကို အစားထိုးကြောင်း ဘရပ်လာ အက္ခရာ အစား

#contianer {
  display: flex;
}
#myDiv {
  place-self: end stretch;
}

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

CSS အက္ခရာ

place-self: auto|value|initial|inherit;

value

နည်းပါးစွာ

ဘရပ်လာ အထောက်အထား

အချက်အလက် များ သည် ထို အကိုးအခံ အရာ ကို ပထမဆုံး အထောက်အထား ပြုလုပ် သော ဘရပ်လာ မူကျင် ကို ကိုးကားသည်။

နောက်ခံ စာမျက်နှာ

教程：CSS 网格布局

教程：CSS 弹性盒布局

参考：CSS align-self အချက်

参考：စက်တင် justify-self သုံးစွဲ့

参考：CSS အသုံးပြု သည့် အကျုံး လက်ခံ သည့် အကိုးအချုပ်