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

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

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

Browser Support

  • ক্রোম: 123।
  • প্রান্ত: 123।
  • ফায়ারফক্স: 125।
  • সাফারি: 17.4.

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

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

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

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

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

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

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

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

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

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

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

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