CSS place-content অপার্টি

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

place-content এক্সপ্রোপ্রিয়টি ফ্লেক্সবক্স (flexbox) এবং গ্রিড (grid) লেআউটের জন্য ব্যবহৃত হয়, এটি নিম্নলিখিত এক্সপ্রোপ্রিয়টির সংক্ষিপ্তণ

যদি place-content একটি মাত্র মান থাকে:

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

যদি place-content একটি মাত্র মান থাকে:

place-content: end;
  • তখন align-content এবং justify-content এক্সপ্রোপ্রিয়টির মান 'end' হবে

উদাহরণ

উদাহরণ 1

অলঙ্কারীর তারিখটি সময় পরিমাণ পরিমাণ বৃদ্ধি করেছে, এবং এটি একটি অলঙ্কারীর মতো দেখাচ্ছে

#container {
  display: flex;
  place-content: end space-between;
}

আপনার নিজেই চেষ্টা করুন

উদাহরণ 2: গ্রিড বিন্যাস

ব্লক দিকের অতিরিক্ত স্থানকে প্রত্যেক গ্রিড প্রকল্পের চারপাশে সমতালিন করা হয়, এবং গ্রিড প্রকল্পগুলো পাত্র দিকে কেন্দ্রাভূত অবস্থান করা হয়:

#container {
  display: grid;
  place-content: space-around center;
}

আপনার নিজেই চেষ্টা করুন

CSS বিন্যাস

place-content: normal|value|initial|inherit;

বৈশিষ্ট্য মান

মান বর্ণনা
normal

ডিফল্ট মান। লেইজক্রম নির্ভর করে

অপরিবর্তিত align-content এবং justify-content মানকে না সম্পূর্ণ করার সমতুল্য
stretch

গ্রিড: যদি মাপ না দেওয়া হয়, তবে গ্রিড প্রকল্পকে গ্রিড কনটেনারকে সমূহ করে পূর্ণ করতে সমূহ করবে。

এলাকা বিন্যাস: যদি এলাকা প্রকল্পকে ক্রস অক্ষে মাপ না দেওয়া হয়, তবে এলাকা কনটেনারকে ক্রস অক্ষে সমূহ করে পূর্ণ করতে সমূহ করবে。
start প্রকল্পকে কনটেনারের ভাবমুখী অবস্থান করান
end প্রকল্পকে কনটেনারের শেষের অবস্থান করান
center প্রকল্পকে কনটেনারের কেন্দ্রে অবস্থান করান
space-between কনটেনারের দুই অক্ষে উপলব্ধ স্থানকে সমতালিন করুন, যাতে প্রকল্পগুলোর মধ্যে বিচ্ছিন্নতা সমান হয়。
space-around কনটেনারের দুই অক্ষে উপলব্ধ স্থানকে সমতালিন করুন, যাতে প্রত্যেক প্রকল্পের চারপাশের মধ্যে বিচ্ছিন্নতা সমান হয়。
space-evenly কনটেনারের দুই অক্ষে প্রকল্পকে সমতালিন করুন。
overflow-alignment

'safe'：যদি কনটেন্ট প্রবলত হয়, তবে প্রকল্পকে 'start' অবস্থান মানে নিয়ে আসুন。

'unsafe'：যেহেতু প্রকল্পের কনটেন্ট প্রবলত হয় না, তাই অবস্থান মানকে অপরিবর্তিত রাখুন。
initial এই বৈশিষ্ট্যকে তার ডিফল্ট মানে নিয়ে আসুন। দেখুন initial。
inherit এই বৈশিষ্ট্যকে তার পিতৃত্ব এলাকা থেকে উত্তরণ করুন। দেখুন inherit。

টেকনিক্যাল বিবরণ

ডিফল্ট মান: normal
উত্তরণযোগ্যতা: না
অ্যানিমেশন নির্মাণ: সমর্থিত নয়। দেখুন:অ্যানিমেশন-সংক্রান্ত বৈশিষ্ট্য。
সংস্করণ: CSS3
JavaScript বিন্যাস: object.style.placeContent="end space-around"

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

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

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

সংশ্লিষ্ট পাতা

শিক্ষাক্রম:CSS গ্রিড বিন্যাস

শিক্ষাক্রম:CSS এলাকা বিন্যাস

উল্লেখ:CSS align-content অ্যাট্রিবিউট

উল্লেখ:CSS justify-content প্রতিশব্দ

উল্লেখ:HTML DOM alignContent 属性