CSS নমনীয় বক্স লেআউট স্পেসিফিকেশনের একটি পূর্ববর্তী সংস্করণ পরম অবস্থানে থাকা শিশুদের স্থির অবস্থান সেট করে যেন তারা একটি ফ্লেক্স আইটেম যার আকার 0px বাই 0px। স্পেকের সর্বশেষ সংস্করণ এগুলিকে সম্পূর্ণরূপে প্রবাহের বাইরে নিয়ে যায় এবং সারিবদ্ধ এবং ন্যায্যতা বৈশিষ্ট্যের উপর ভিত্তি করে স্ট্যাটিক অবস্থান সেট করে। এই লেখার সময়, ডেস্কটপ এবং অ্যান্ড্রয়েডের জন্য এজ এবং অপেরা 39 ইতিমধ্যে এটি সমর্থন করে।
একটি উদাহরণের জন্য, আসুন নিম্নলিখিত HTML-এ কিছু পজিশনিং আচরণ প্রয়োগ করি।
<div class="container">
<div>
<p>In Chrome 52 and later, the green box should be centered vertically and horizontally in the red box.</p>
</div>
</div>
আমরা এই মত কিছু যোগ করব:
.container {
display: flex;
align-items: center;
justify-content: center;
}
.container > * {
position: absolute;
}
Chrome 52 বা পরবর্তীতে, নেস্ট করা <div> সম্পূর্ণরূপে কন্টেইনারে কেন্দ্রীভূত হবে <div> ।
নন-কনফর্মিং ব্রাউজারগুলিতে, সবুজ বাক্সের উপরের বাম কোণে লাল বাক্সের উপরের কেন্দ্রে থাকবে।
আপনি যদি Chrome বা অন্য কোন ব্রাউজারে নিজের জন্য এটি চেষ্টা করতে চান তবে আমাদের নমুনা ডাউনলোড করুন বা লাইভ ডেমো দেখুন।