ফ্লেক্সবক্স CSS-এর একটি আধুনিক লেআউট মডেল যা কন্টেইনারে থাকা আইটেমগুলোকে একত্রে সাজানোর জন্য ব্যবহৃত হয়। এটি বিশেষভাবে ডাইনামিক লেআউট তৈরি করতে এবং রেসপনসিভ ডিজাইনের জন্য খুবই কার্যকর। নিচে ফ্লেক্সবক্সের কিছু অ্যাডভান্স কনসেপ্ট বাংলা ভাষায় ব্যাখ্যা করা হলো:
১. ফ্লেক্স কন্টেইনার এবং ফ্লেক্স আইটেম
ফ্লেক্সবক্সে দুটি প্রধান উপাদান থাকে:
- ফ্লেক্স কন্টেইনার: যেটি
display: flex;
ব্যবহার করে নির্ধারণ করা হয়। - ফ্লেক্স আইটেম: কন্টেইনারের ভিতরের সব সরাসরি চাইল্ড এলিমেন্ট।
উদাহরণ:
html
Copy code
<div class="container">
<div class="item">১</div>
<div class="item">২</div>
<div class="item">৩</div>
</div>
<style>
.container {
display: flex;
background-color: #f4f4f4;
}
.item {
padding: 20px;
background-color: #4caf50;
color: white;
margin: 5px;
}
</style>
২. ফ্লেক্স প্রোপার্টিস
a) flex-direction
এটি ফ্লেক্স আইটেমের দিক নির্ধারণ করে।
row
(ডিফল্ট): বামে থেকে ডানে।row-reverse
: ডানে থেকে বামে।column
: উপরে থেকে নিচে।column-reverse
: নিচে থেকে উপরে।
css
Copy code
.container {
display: flex;
flex-direction: column;
}
b) justify-content
ফ্লেক্স আইটেমগুলোকে প্রধান (main) অ্যাক্সিসে (অনুভূমিক বা উল্লম্ব) সজ্জিত করে:
flex-start
: শুরুতে।flex-end
: শেষে।center
: কেন্দ্রে।space-between
: সমান ফাঁকা সহ।space-around
: চারপাশে ফাঁকা সহ।
css
Copy code
.container {
display: flex;
justify-content: center;
}
c) align-items
আইটেমগুলোকে ক্রস (cross) অ্যাক্সিসে সজ্জিত করে:
flex-start
: ওপরে।flex-end
: নিচে।center
: মাঝখানে।stretch
: ফ্লেক্স কন্টেইনারের উচ্চতা অনুযায়ী প্রসারিত।
css
Copy code
.container {
display: flex;
align-items: flex-start;
}
d) align-content
যদি একাধিক লাইনে ফ্লেক্স আইটেম থাকে, এটি পুরো লাইনের সজ্জা নিয়ন্ত্রণ করে।
৩. ফ্লেক্স গ্রো, ফ্লেক্স শ্রিংক, এবং ফ্লেক্স বেসিস
a) flex-grow
আইটেমগুলো কীভাবে বাড়বে তা নির্ধারণ করে।
css
Copy code
.item {
flex-grow: 1; /* প্রতিটি আইটেম সমানভাবে জায়গা নেবে */
}
b) flex-shrink
আইটেমগুলো কীভাবে সংকুচিত হবে তা নির্ধারণ করে।
css
Copy code
.item {
flex-shrink: 0; /* সংকুচিত হবে না */
}
c) flex-basis
প্রাথমিক সাইজ সেট করে।
css
Copy code
.item {
flex-basis: 100px; /* প্রত্যেকটি আইটেমের প্রাথমিক প্রস্থ হবে ১০০px */
}
৪. ফ্লেক্স র্যাপ (flex-wrap)
ফ্লেক্স আইটেমগুলো এক লাইনে থাকবে না বরং একাধিক লাইনে যাবে কিনা তা নির্ধারণ করে।
nowrap
(ডিফল্ট): এক লাইনে সব আইটেম থাকবে।wrap
: একাধিক লাইনে যাবে।wrap-reverse
: বিপরীত দিক থেকে লাইনে যাবে।
css
Copy code
.container {
display: flex;
flex-wrap: wrap;
}
৫. অর্ডার (order)
ফ্লেক্স আইটেমের প্রদর্শনের ক্রম পরিবর্তন করতে ব্যবহার হয়।
css
Copy code
.item:nth-child(2) {
order: -1; /* দ্বিতীয় আইটেম প্রথমে আসবে */
}
উদাহরণ:
html
Copy code
<div class="container">
<div class="item">১</div>
<div class="item">২</div>
<div class="item">৩</div>
</div>
<style>
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.item {
flex: 1;
margin: 10px;
background-color: #4caf50;
color: white;
text-align: center;
padding: 20px;
}
</style>
এটি একটি রেসপনসিভ ফ্লেক্সবক্স লেআউট তৈরি করবে।