CSS Flex box ফ্লেক্স কন্টেইনার এবং ফ্লেক্স আইটেম

ফ্লেক্সবক্স 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>

এটি একটি রেসপনসিভ ফ্লেক্সবক্স লেআউট তৈরি করবে।