CSS 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 vs justify-items

কনটেনারের প্রতি অবস্থানটি 'মধ্যস্থ' হিসেবে নির্ধারণ করা হয়, গ্রিড অবজেক্টটি নিজেই 'ডানদিক' হিসেবে নির্ধারণ করা হয়। এটারিবিউট 'right' প্রভাব পায়:

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

亲自试一试

উদাহরণ 3: সম্পূর্ণ লক্ষ্য অবস্থানের জন্য justify-self নির্ধারণ করুন

সম্পূর্ণ লক্ষ্য অবস্থানের জন্য justify-self নির্ধারণ করুন:

#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|baseline alignment|initial|inherit;

属性值

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

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

如果设置了 size ，则属性值的行为类似于 'start'。
stretch 如果未设置 inline-size（宽度），则拉伸以填充网格单元格。
start 在行内方向的开头对齐项目。
left 将项目左对齐。
center 将项目对齐到中心。
end 在行内方向的末尾对齐项目。
right 将项目右对齐。
overflow-alignment
  • 'safe' 会将项目的对齐方式设置为 'start'，如果内容溢出。
  • 'unsafe' 保持对齐值，无论项目内容是否溢出。
baseline alignment 元素与父元素的基线对齐。
initial এই বৈশিষ্ট্যটি তার ডিফল্ট মানে সমন্বয় করুন। দেখুন initial。
inherit তার পিতৃত্ব এলিমেন্ট থেকে এই বৈশিষ্ট্যটি উত্তরণ করুন। দেখুন inherit。

প্রযুক্তিগত বিবরণ

ডিফল্ট মান: auto
উত্তরণ: না
অ্যানিমেশন নির্মাণ: সমর্থিত নয়। দেখুন:অ্যানিমেশন-সংক্রান্ত বৈশিষ্ট্য。
সংস্করণ: CSS3
জেভাস্ক্রিপ্ট গঠনশৈলী: object.style.justifySelf="right"

ব্রাউজার সমর্থন

সারণীতে উল্লিখিত সংখ্যা এই বৈশিষ্ট্যটি সম্পূর্ণরূপে সমর্থনকারী প্রথম ব্রাউজারের সংস্করণ নির্দেশ করে。

চ্রোম এজ ফায়ারফক্স সাফারি ওপেরা
চ্রোম আইই / এজ ফায়ারফক্স সাফারি ওপেরা
57.0 16.0 45.0 10.1 44.0