আগের পর্বে আমরা শিখেছি Position property। আজকে শিখবো Flexbox — আধুনিক CSS layout-এর সবচেয়ে শক্তিশালী ও জনপ্রিয় টুল। এতদিন আমরা যা যা শিখেছি (inline-block, position) তার চেয়ে অনেক সহজে ও নির্ভরযোগ্যভাবে এলিমেন্ট সাজানো যায় Flexbox দিয়ে।
Flexbox কী?
Flexbox (Flexible Box Layout) হলো একটা layout system, যেটা দিয়ে একটা কনটেইনারের ভেতরের এলিমেন্টগুলোকে সহজে সারি বা কলাম আকারে সাজানো যায়, স্পেস ভাগ করা যায়, এবং align করা যায় — মাত্র কয়েকটা লাইনের CSS দিয়ে।
Flexbox-এর দুইটা অংশ থাকে:
- Flex Container — যে এলিমেন্টে
display: flexদেওয়া হয় - Flex Items — সেই কনটেইনারের সরাসরি চাইল্ড এলিমেন্টগুলো
Flex শুরু করা
.container {
display: flex;
}
শুধু এই একটা লাইন লিখলেই ভেতরের সব চাইল্ড এলিমেন্ট আপনাআপনি পাশাপাশি (এক সারিতে) বসে যাবে — কোনো float বা inline-block ছাড়াই।
<div class="container"> <div>বক্স ১</div> <div>বক্স ২</div> <div>বক্স ৩</div> </div>
flex-direction — সারি নাকি কলাম
ডিফল্টভাবে flex items পাশাপাশি (row) বসে। কলাম আকারে (উপর-নিচ) সাজাতে flex-direction: column ব্যবহার হয়:
.container {
display: flex;
flex-direction: row; /* ডিফল্ট — পাশাপাশি */
flex-direction: column; /* উপর-নিচ */
}
justify-content — মূল অক্ষ বরাবর সাজানো
এটা flex items-কে কনটেইনারের মূল অক্ষ (row-তে হরাইজন্টাল) বরাবর কীভাবে সাজাবে তা নিয়ন্ত্রণ করে:
| Value | কাজ |
|---|---|
flex-start |
শুরুতে জড়ো হয় (ডিফল্ট) |
center |
মাঝখানে জড়ো হয় |
flex-end |
শেষে জড়ো হয় |
space-between |
প্রথমটা শুরুতে, শেষেরটা শেষে, বাকিগুলো সমান ফাঁক |
space-around |
প্রতিটার চারপাশে সমান ফাঁক |
justify-content: space-between উদাহরণ
align-items — আড়াআড়ি অক্ষ বরাবর সাজানো
justify-content যদি হরাইজন্টাল নিয়ন্ত্রণ করে (row-তে), তাহলে align-items নিয়ন্ত্রণ করে ভার্টিকাল:
.container {
display: flex;
align-items: flex-start; /* উপরে */
align-items: center; /* মাঝখানে */
align-items: flex-end; /* নিচে */
}
align-items: center — সব বক্স ভার্টিক্যালি মাঝখানে
টিপস: এলিমেন্টকে পেজের একদম মাঝখানে (উপর-নিচ, ডান-বাম দুইদিকেই) বসাতে চাইলে justify-content: center; ও align-items: center; — এই দুইটা লাইনই যথেষ্ট। এটা CSS দিয়ে "পারফেক্ট সেন্টারিং" করার সবচেয়ে জনপ্রিয় ও সহজ পদ্ধতি।
gap — এলিমেন্টের মাঝে ফাঁক
আগে flex items-এর মধ্যে ফাঁক তৈরি করতে প্রতিটাতে আলাদা margin দিতে হতো। এখন gap দিয়ে এক লাইনেই কাজ হয়ে যায়:
.container {
display: flex;
gap: 16px;
}
flex-wrap — লাইন ভাঙা
ডিফল্টভাবে flex items সব একই লাইনে থাকতে চেষ্টা করে, প্রয়োজনে ছোট হয়ে যায়। ছোট স্ক্রিনে এটা সমস্যা তৈরি করতে পারে। flex-wrap: wrap দিলে জায়গা কম পড়লে items পরের লাইনে চলে যায়:
.container {
display: flex;
flex-wrap: wrap;
}
টিপস: Responsive card layout বানানোর সময় প্রায় সবসময় flex-wrap: wrap ব্যবহার করা উচিত — এতে ছোট স্ক্রিনে কার্ডগুলো ছোট হয়ে গাদাগাদি না হয়ে, পরের লাইনে সুন্দরভাবে সাজে।
একটা সম্পূর্ণ উদাহরণ
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>Flexbox উদাহরণ</title>
<style>
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
background: #2c3e50;
}
.navbar a {
color: white;
text-decoration: none;
}
.card-list {
display: flex;
flex-wrap: wrap;
gap: 16px;
padding: 20px;
}
.card {
flex: 1;
min-width: 200px;
border: 1px solid #ddd;
padding: 16px;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="navbar">
<a href="#">লোগো</a>
<a href="#">মেনু</a>
</div>
<div class="card-list">
<div class="card">কার্ড ১</div>
<div class="card">কার্ড ২</div>
<div class="card">কার্ড ৩</div>
</div>
</body>
</html>
নিজে চেষ্টা করো
Exercise:
- একটা navbar বানাও —
display: flexওjustify-content: space-betweenদিয়ে লোগো বাম দিকে, মেনু ডান দিকে বসাও - তিনটা div-কে
justify-content: centerওalign-items: centerদিয়ে পুরোপুরি মাঝখানে বসাও - একটা card layout বানাও,
flex-wrap: wrapওgapব্যবহার করে
পরের পর্বে যা থাকছে
পর্ব ৭-এ আমরা শিখবো Flexbox দিয়ে আরও কিছু real-world layout — navbar, card layout, centering-এর প্র্যাকটিক্যাল উদাহরণ।