စက်တင်ပေါင်းချိန် justify-self

အကြောင်းကြားချက်

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

justify-self အကိုး အစားအသား အုတ်အချိန်၏ ကြင်းတိုက်အစား လမ်းကြောင်း၏ ဘယ်လက်အား လျှင်းပါ။

အင်္ဂလိပ် စာတမ်း အတွက် ကြင်းတိုက်အစား လမ်းကြောင်းအား ဘယ်လက်မှ အရှေ့သို့ လျှင်းလျှင်းသည်၊ အစားအသား လမ်းကြောင်းအား အောက်သို့ လျှင်းလျှင်းသည်။

အဆိုပါ အကိုးကို အစားအသား အုတ်အချိန်၏ အစားအသား အုတ်အချိန်၏ အစားအသား အား စီးပွားရေး ပြင်ဆင်ပြီး အချိန်အား ပြင်ဆင်ပါ။အစားအသား အုတ်အချိန်၏ အစားအသား လမ်းကြောင်း၏ အောက်သို့ လျှင်းပြီး လျှင် အစားအသား အုတ်အချိန်၏ အစားအသား အုတ်အချိန်၏ အစားအသား အား စီးပွားရေး ပြင်ဆင်ပါ။ align-self အကိုး သို့မဟုတ် align-items အကိုး အကိုး

အခြား ကြည့်ချင်ရှိသော်

CSS ဖော်ပြCSS Grid

CSS ဖော်ပြCSS အစားအသား

CSS ကိုးကားချက်align-content အကိုး

CSS ကိုးကားချက်align-items အကိုး

CSS ကိုးကားချက်align-self အကိုး

CSS ကိုးကားချက်direction အကိုး

CSS ကိုးကားချက်grid အကိုး

CSS ကိုးကားချက်grid-template-columns အကိုး

CSS ကိုးကားချက်position အကိုး

CSS ကိုးကားချက်writing-mode အကိုး

အခြား ကြည့်ချင်ရှိသော်

အမှတ်ကြော်

အမှတ် 1

အစားအသား အား အစားအသား အုတ်အချိန်၏ ဘယ်လက်အား လျှင်းပါ။

.red {
  display: grid;
  justify-self: right;
}

亲自试一试

အမှတ် 2: justify-self နှင့် justify-items အဖြတ်အပြတ်

အကွက်၏ စီးပွားရေး အား 'center' အား စီစဥ်ပါ၊ အစားအသား ကိုမူ 'right' အား စီစဥ်ပါ။ အကိုးအခံ 'right' အား အပြောင်းအလဲပြုသည်။

#container {
  display: grid;
  justify-items: center;
}
.blue {
  justify-self: right;
}

亲自试一试

အမှတ် 3: အတိုက်အချုပ် အစား အသုံးပြုသော အစားအသား ပေါ်တွင် justify-self ပြင်ဆင်ပါ။

အတိုက်အချုပ် အစား အသုံးပြုသော အစားအသား အား 'right' အား စီစဥ်ပါ။

#container {
  display: grid;
  position: relative;
}
.red {
  position: absolute;
  justify-self: right;
}

亲自试一试

အမှတ် 4: writing-mode

အကွက် အပေါ် အစား အသုံးပြုသော writing-mode အကိုးကို vertical-rl အား သတ်မှတ်ပါက ကြင်းတိုက်အစား လမ်းကြောင်းအား အောက်သို့ လျှင်းလျှင်းသည်။ အကျိုးသက်ရောက်ခြင်းမှာ အကွက်၏ စတင်အချိန်မှာ ဘယ်လက်မှ အပေါ်သို့ ပြောင်းလဲလာပြီး အကွက်၏ အဆုံးအချိန်မှာ ဘယ်လက်မှ အောက်သို့ ပြောင်းလဲသည်။

#container {
  display: grid;
  writing-mode: vertical-rl;
}
.blue {
  justify-self: end;
}

亲自试一试

例子 5：direction

网格容器元素的 direction 属性值设置为“rtl”时，行内方向是从右到左。结果是容器的起点从左侧移到右侧，容器的末端从右侧移到左侧：

#container {
  display: grid;
  direction: rtl;
}
.blue {
  justify-self: end;
}

亲自试一试

CSS 语法

justify-self: auto|normal|stretch|positional alignment|overflow-alignment|အကွင်း အဆိုပါအခြေအနေ|initial|inherit;

属性值

值 描述
auto 默认值。继承网格容器的 justify-self 属性值。
normal

取决于布局上下文，但类似于未设置 size 时网格项在网格布局中的 'stretch'。

如果设置了 size ，则属性值的行为类似于 'start'。
stretch 如果未设置 inline-size（宽度），则拉伸以填充网格单元格。
start 在行内方向的开头对齐项目。
left 将项目左对齐。
center 将项目对齐到中心。
end 在行内方向的末尾对齐项目。
right အကွင်း ကို အသုံးပြုသည်
overflow-alignment
  • 'safe' အဆိုပါ အခြေအနေ ကို 'start' အဆိုပါ အခြေအနေ အဆိုပါ အခြေအနေ အဆိုပါ အခြေအနေ အဆိုပါ အခြေအနေ အဆိုပါ အခြေအနေ အဆိုပါ အခြေအနေ အဆိုပါ အခြေအနေ အဆိုပါ အခြေအနေ အဆိုပါ အခြေအနေ အဆိုပါ အခြေအနေ အဆိုပါ အခြေအနေ အဆိုပါ အခြေအနေ အဆိုပါ အခြေအနေ အဆိုပါ အခြေအနေ အဆိုပါ အခြေအနေ အဆိုပါ အခြေအနေ အဆိုပါ အခြေအနေ အဆိုပါ အခြေအနေ အဆိုပါ အခြေအနေ အဆိုပါ အခြေအနေ အဆိုပါ အခြေအနေ အဆိုပါ အခြေအနေ အဆိုပါ အခြေအနေ အဆိုပါ အခြေအနေ အဆိုပါ အခြေအနေ အဆိုပါ အခြေအနေ အဆိုပါ အခြေအနေ အဆိုပါ အခြေအနေ အဆိုပါ အခြေအနေ အဆိုပါ အခြေအနေ အဆိုပါ အခြေအနေ အဆိုပါ အခြေအနေ အဆိုပါ အခြေအနေ အဆိုပါ အခြေအနေ အဆိုပါ အခြေအနေ အဆိုပါ အခြေအနေ အဆိုပါ အခြေအနေ အဆိုပါ အခြေအနေ အဆိုပါ အခြေအနေ အဆိုပါ အခြေအနေ အဆိုပါ အခြေအနေ အဆိုပါ အခြေအနေ အဆိုပါ အခြေအနေ အဆိုပါ အခြေအနေ ကို ပြောဆိုသည်။
  • 'unsafe' အဆိုပါ အဆိုပါ အဆိုပါ အခြေအနေ အဆိုပါ အခြေအနေ အဆိုပါ အခြေအနေ မပြောင်းလဲပေ။
အကွင်း အဆိုပါအခြေအနေ အကွင်း နှင့် အဖိုးအချုပ် တူညီသည်
initial အဖိုးအချုပ် ကို မည်သည့် မည်သည့် အခြေအနေမှ မပြောင်းလဲဘဲ ကျသည်။ ကြည့်ရှုရန်: initial。
inherit ဖြစ်ပေါ်လာသော အဖိုးအချုပ် မှ အဖိုးအချုပ် ကို ကူညီလိုက်သည်။ ကြည့်ရှုရန်: inherit。

နည်းပညာ အချက်အလက်

မည်သည့် အခြေအနေမှ မပြောင်းလဲဘဲ: auto
အပြုအမူ: မမှန်
အနုပညာ ဖန်တီး: မမှန်မဟုတ်ဘဲ ကြည့်ရှုရန်:အနုပညာ ပါရောက်သည့် ဗီဇ。
ကြောင်းအောက်: CSS3
JavaScript ဘာသာစကား: object.style.justifySelf="right"

ဘာသာစကား ကူညီ

အခြေအနေအချက်အလက်များတွင် အပြည့်အဝေးဖြစ်သော ထိပ်တန်း ဘာသာစကား ကို ပြောဆိုထားသည်。

ခလုံ အက်ဒင်ဂျ ဖရက်ခ် ဆာဖရေ အိုပီ
ခလုံ IE / အက်ဒင်ဂျ ဖရက်ခ် ဆာဖရေ အိုပီ
57.0 16.0 45.0 10.1 44.0