ফ্লেক্স কন্টেইনারে `align-items` প্রোপার্টি ব্যবহার করে ক্রস অ্যাক্সিস (ডিফল্টরূপে ভেরটিক্যাল) অনুযায়ী আইটেম অ্যালাইন করা যায়।
উদাহরণ: Cross Axis অ্যালাইনমেন্ট
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
.container {
height: 200px; display: flex; width: 100%;
align-items: center; border: 2px solid red;
}
div { width: 100px; height: 100px; color: white; text-align: center; font-size: 30px; }
.first { background-color: rgb(55, 0, 255); }
.second { background-color: red; }
.third { background-color: rgb(140, 0, 255); }
</style>
</head>
<body>
<h1>ক্রস অ্যাক্সিস অনুযায়ী ফ্লেক্স আইটেম অ্যালাইনমেন্ট</h1>
<div class="container">
<div class="first">প্রথম ডিভ</div>
<div class="second">দ্বিতীয় ডিভ</div>
<div class="third">তৃতীয় ডিভ</div>
</div>
</body>
</html>
কোড ব্যাখ্যা
- align-items: center: সব আইটেম ক্রস অ্যাক্সিসের মাঝপথে (ভেরটিক্যালি মিডল) অ্যালাইন হবে।
- height: 200px (কন্টেইনার): উচ্চতা থাকলে ভেরটিক্যাল অ্যালাইনমেন্ট দৃশ্যমান হয়।
align-items মানগুলো
- stretch (ডিফল্ট): আইটেম কন্টেইনারকে ফুল করবে।
- flex-start / flex-end / center / baseline: অন্য অ্যালাইনমেন্ট অপশন।
align-self
আইটেম লেভেলে `align-self` দিয়ে indywidualভাবে ওভাররাইড করা যায়।
