ব্লক এবং টেবিল লেআউটে সারিবদ্ধ-সামগ্রীর জন্য সমর্থন

র‍্যাচেল অ্যান্ড্রু

Chrome 123 থেকে আপনি ব্লক এবং টেবিল লেআউটে CSS Box Alignment থেকে align-content প্রোপার্টি ব্যবহার করতে পারেন। এটি ফ্লেক্স বা গ্রিড লেআউট তৈরি না করেই ব্লকের দিকনির্দেশনা সারিবদ্ধকরণের অনুমতি দেবে। তবে, যদি আপনি এই লেআউট পদ্ধতিগুলির বাইরে align-content ব্যবহার করে থাকেন তবে আপনার CSS আপডেট করার প্রয়োজন হতে পারে কারণ এটি এখন কার্যকর হবে।

Browser Support

  • ক্রোম: ১২৩।
  • প্রান্ত: ১২৩।
  • ফায়ারফক্স: ১২৫।
  • সাফারি: ১৭.৪।

ফ্লেক্স এবং গ্রিড লেআউটে align-content

আপনি সম্ভবত ফ্লেক্স আইটেম বা গ্রিড ট্র্যাক সারিবদ্ধ করার জন্য align-content ব্যবহার করেছেন। একটি ফ্লেক্স লেআউটে, align-content প্রোপার্টিটি ফ্লেক্স কন্টেইনারে ক্রস অক্ষের উপর ফ্লেক্স আইটেমগুলিকে সারিবদ্ধ করার জন্য ব্যবহার করা হয়। নিম্নলিখিত উদাহরণে, এর একটি মান space-between রয়েছে তাই এটি ফ্লেক্স কন্টেইনারে উপলব্ধ স্থানটি ফ্লেক্স সারির মধ্যে বিতরণ করছে।

align-content প্রোপার্টি ফ্লেক্স আইটেমের সারিগুলিকে ফাঁকা করে, কারণ ফ্লেক্স কন্টেইনারে ক্রস অক্ষে অতিরিক্ত জায়গা থাকে।

একটি আইটেমকে উল্লম্বভাবে কেন্দ্রীভূত করুন

align-content বিশেষভাবে কার্যকর যেখানে একটি আইটেমকে একটি কন্টেইনারের মধ্যে উল্লম্বভাবে কেন্দ্রীভূত করা হয়। এটি অর্জনের জন্য, align-content: center এর সাথে display: flex ব্যবহার করুন। এর ফলে আইটেমটি একটি flex আইটেমে পরিণত হয় এবং অন্যান্য ডিফল্ট flex আইটেম আচরণও কার্যকর হয়। নিম্নলিখিত উদাহরণে শিরোনামটি align-content: center এর সাথে উল্লম্বভাবে কেন্দ্রীভূত করা হয়েছে, এর ফলে আইটেমটি কন্টেন্টের সাথে মানানসইভাবে সঙ্কুচিত হয়, এবং তাই আপনাকে আইটেমটিতে flex-grow: 1 প্রয়োগ করতে হবে।

align-content প্রোপার্টিটি একটি ফ্লেক্স কন্টেইনারের মধ্যে উল্লম্বভাবে শিরোনামকে কেন্দ্র করে।

ব্লক লেআউটের জন্য align-content উপলব্ধ থাকার ফলে, আপনি সম্পত্তিটি কাজ করার জন্য একটি ফ্লেক্স লেআউট তৈরি করার প্রয়োজন ছাড়াই উল্লম্ব সারিবদ্ধকরণ অর্জন করতে সক্ষম হবেন। আইটেমটি একটি ব্লক আইটেম হিসাবে রয়ে যাওয়ায় কোনও অতিরিক্ত বৈশিষ্ট্যের প্রয়োজন নেই, একমাত্র পরিবর্তন হল সারিবদ্ধকরণে।

align-content প্রপার্টিটি একটি ব্লক কন্টেইনারের মধ্যে উল্লম্বভাবে শিরোনামকে কেন্দ্র করে (Chrome 123 বা Safari 17.4 বা তার বেশি প্রয়োজন)।

ব্লক লেআউটে align-content সমর্থনের জন্য পরীক্ষা করুন

দুর্ভাগ্যবশত, ব্লক লেআউটে align-content সমর্থনের জন্য পরীক্ষা করা সম্ভব নয়। যেহেতু align-content দীর্ঘ সময় ধরে flex এবং grid লেআউটে সমর্থিত, তাই @supports সহ feature query ব্যবহার করলে সর্বদা true ফিরে আসবে। flexbox-এর gap প্রপার্টির ক্ষেত্রেও একই পরিস্থিতি ঘটেছে। CSS ওয়ার্কিং গ্রুপ এই ধরণের আংশিক বাস্তবায়নের জন্য একটি সমাধান অনুসন্ধান করছে।

অপ্রত্যাশিত সারিবদ্ধতার জন্য আপনার সাইটগুলি পরীক্ষা করুন

বহু বছর ধরে স্পেসিফিকেশনে align-content প্রপার্টি ব্লক লেআউটে কাজ করে এমনভাবে সংজ্ঞায়িত করা হয়েছে। যেহেতু এই প্রসঙ্গের বাইরে কোনও ব্রাউজার align-content সমর্থন করে না, তাই এটি কিছুই করেনি। তবে, যদি আপনি এমন কিছুতে প্রপার্টি যোগ করে থাকেন যা ফ্লেক্স বা গ্রিড কন্টেইনার নয়, তাহলে Chrome 123 থেকে এর প্রভাব পড়তে শুরু করবে। align-content ব্যবহারের জন্য আপনার CSS অনুসন্ধান করুন এবং যদি এটি আপনার ক্ষেত্রে হয় তবে আপনার সাইট এবং অ্যাপ্লিকেশনগুলি পরীক্ষা করার জন্য বিটা ব্যবহার করুন।