CSS place-self প্রক্রিয়া

সংজ্ঞা ও ব্যবহার

place-self এক্সিট্রিয়ালস একক গ্রিড আইটেমকে সামঞ্জস্য করার জন্য ব্যবহৃত হয়, এটি নিম্নলিখিত এক্সিট্রিয়ালসগুলির সংক্ষিপ্ত রূপ

যদি place-self একটি মান থাকে:

place-self: start center;
  • align-self এক্সিট্রিয়ালস মান 'start' হবে
  • justify-self এক্সিট্রিয়ালস মান 'center' হবে

যদি place-self একটি মান থাকে:

place-self: end;
  • তখন align-self এবং justify-self এক্সিট্রিয়ালস মান '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;

অ্যাট্রিবিউট মান

মান বর্ণনা
auto ডিফল্ট
normal

লেইউট কনটেক্স্টের উপর নির্ভর করে, কিন্তু মাপ নির্ধারিত না হওয়াকালীন গ্রিড লেইউটের 'stretch' এর মতো আচরণ করে

যদি মাপ নির্ধারিত হয়, তবে এই অ্যাট্রিবিউটের আচরণ 'start' এর মতো
stretch যদি মাপ নির্ধারিত না হয়, তবে গ্রিড সেলের পূর্ণ বিস্তৃতি নিয়ে সম্পূর্ণ হয়
start হাইপার-ডায়রেকশন এবং ব্লক-ডায়রেকশনে প্রকল্পটিকে শুরুর দিকে সামঞ্জস্যপূর্ণ করুন
left হাইপার-ডায়রেকশনে প্রকল্পটিকে ডানদিকে সামঞ্জস্যপূর্ণ করুন, যা justify-self এলিমেন্টের মান হিসাবে ব্যবহৃত হয়
center প্রকল্পটিকে কেন্দ্রে সামঞ্জস্যপূর্ণ করুন
end হাইপার-ডায়রেকশন এবং ব্লক-ডায়রেকশনে প্রকল্পটিকে শেষের দিকে সামঞ্জস্যপূর্ণ করুন
right হাইপার-ডায়রেকশনে প্রকল্পটিকে ডানদিকে সামঞ্জস্যপূর্ণ করুন, যা justify-self এলিমেন্টের মান হিসাবে ব্যবহৃত হয়
overflow-alignment

'safe' : যদি বিষয়বস্তু প্রবলত হয়, তবে প্রকল্পটি 'start' হিসাবে সামঞ্জস্যপূর্ণ মান নির্ধারণ করুন

'unsafe' : যেহেতু প্রকল্পের বিষয়বস্তু প্রবলত হয় না, তাই একই সাথে সামঞ্জস্যপূর্ণ মান রাখুন
বেসলাইন এক্সালিনেশন এলিমেন্ট এবং পিতৃত্ব এলিমেন্টের বেসলাইনের সাথে একই সাথে মিলিত হয়
initial এই অ্যাট্রিবিউটকে তার ডিফল্ট মানে সমায়োজিত করুন। দেখুন initial。
inherit তার পিতৃত্ব এলিমেন্ট থেকে এই অ্যাট্রিবিউট উত্তরসূরী করুন। দেখুন inherit。

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

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

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

টেবিলের সংখ্যা এই ব্যাপারে প্রথম পূর্ণাঙ্গ সমর্থনকারী ব্রাউজার সংস্করণকে ইনডিকেট করে。

চ্রোম এজ ফায়ারফক্স সাফারি ওপেরা
59.0 79.0 45.0 11.0 46.0

সংশ্লিষ্ট পৃষ্ঠা

শিক্ষা:CSS গ্রিড লেআউট

শিক্ষা:CSS এলাস্টিক বক্স লেআউট

উল্লেখ:CSS align-self প্রোপার্টি

উল্লেখ:CSS justify-self প্রতিভূতি

উল্লেখ:CSS writing-mode প্রতিযোগিতা