15/10/2026

CSS Flexbox — Complete Guide

Learn CSS Flexbox step by step with simple examples. And learn the most used Flexbox properties.

What is CSS Flexbox?

Flexbox (Flexible Box Layout) হলো CSS-এর একটি layout system, যা elements-কে একটি row বা column-এর মধ্যে সহজে arrange, align এবং distribute করতে সাহায্য করে।

    Flexbox বিশেষভাবে useful যখন আপনাকে:
  • Items এক লাইনে সাজাতে হবে
  • Items-এর মধ্যে equal space দিতে হবে
  • Content horizontally বা vertically center করতে হবে
  • Responsive layout তৈরি করতে হবে
  • Navigation bar বা card layout তৈরি করতে হবে

Why Use Flexbox?

আগে layout তৈরি করতে অনেক সময় float, position বা অন্য workaround ব্যবহার করতে হতো।


          Flexbox ব্যবহার করে আমরা সহজেই:

              .container {
                 display: flex;
              }

এরপর বিভিন্ন Flexbox properties ব্যবহার করে items-এর position এবং spacing control করতে পারি।

What you will learn:

    Flexbox Properties

  1. display: flex
  2. Main Axis and Cross Axis
  3. flex-direction
  4. justify-content
  5. align-items
    • justify-content vs align-items
  6. align-content
  7. flex-wrap
  8. gap
  9. order
  10. flex-grow
  11. flex-shrink
  12. flex-basis
  13. flex shorthand
  14. align-self

Flex Container and Flex Items

যে element-এর উপর display: flex ব্যবহার করা হয় সেটি হলো Flex Container।

এর ভিতরের direct children-গুলো হলো Flex Items।


          HTML

          

              <div>Item 1</div>
              <div>Item 2</div>
              <div>Item 3</div>
          


          CSS

          .container {
              display: flex;
          }
    এখানে:
  • .container → Flex Container
  • Item 1, Item 2, Item 3 → Flex Items

Important: Flexbox properties-এর কিছু Container-এর জন্য এবং কিছু Flex Items-এর জন্য ব্যবহার করা হয়।

1. display: flex

Flexbox শুরু করার প্রথম step হলো display: flex ব্যবহার করা।


          .container {
            display: flex;
          }

Default ভাবে items row-তে সাজানো হবে।

2. Main Axis and Cross Axis

Flexbox বুঝতে Main Axis এবং Cross Axis বোঝা খুব গুরুত্বপূর্ণ।

Default flex-direction: row হলে:

          Main Axis   → → → → →

          Cross Axis
              ↓
              ↓
              ↓
  • Main Axis → যেদিকে items সাজানো হয়
  • Cross Axis → Main Axis-এর বিপরীত direction

flex-direction পরিবর্তন করলে axis-ও পরিবর্তিত হয়।

3. flex-direction

flex-direction দিয়ে Flex Items কোন direction-এ থাকবে তা নির্ধারণ করা হয়।

Row


          .container {
            display: flex;
            flex-direction: row;
          }

Items left থেকে right-এ থাকবে।

Row Reverse


          .container {
            display: flex;
            flex-direction: row-reverse;
          }

Items-এর order বিপরীত হবে।

Column


          .container {
            display: flex;
            flex-direction: column;
          }

Items উপর থেকে নিচে থাকবে।

Column Reverse


          .container {
            display: flex;
            flex-direction: column-reverse;
          }

Items-এর order নিচ থেকে উপরে হবে।

Values

          row
          row-reverse
          column
          column-reverse

4. justify-content

justify-content দিয়ে Main Axis বরাবর Flex Items-এর alignment control করা হয়।


          .container {
            display: flex;
            justify-content: center;
          }
        
          Common values:

          flex-start
          center
          flex-end
          space-between
          space-around
          space-evenly

Example


          .container {
            display: flex;
            justify-content: space-between;
          }

এতে প্রথম item শুরুতে, শেষ item শেষে থাকবে এবং মাঝখানে available space distribute হবে।

5. align-items

align-items দিয়ে Cross Axis বরাবর items-এর alignment control করা হয়।


          .container {
            display: flex;
            align-items: center;
          }
        
          Common values:

          stretch
          flex-start
          center
          flex-end
        

          Example:

          .container {
            display: flex;
            align-items: center;
          }

এটি একটি row layout-এর items-কে vertically center করতে খুব useful।

justify-content vs align-items

এই দুটি property নিয়ে beginner-দের অনেক confusion হয়।

          সহজভাবে মনে রাখুন:

            justify-content → Main Axis
            align-items     → Cross Axis
        
          যদি:

            flex-direction: row;
        
          হয়, তাহলে সাধারণভাবে:

            justify-content → horizontal
            align-items     → vertical
        
          আর যদি:

            flex-direction: column;

হয়, তাহলে direction পরিবর্তন হওয়ার কারণে তাদের কাজের axis-ও পরিবর্তিত হয়।

6. align-content

align-content সাধারণত তখন useful যখন Flex Container-এর একাধিক row বা line থাকে।

এর জন্য flex-wrap: wrap প্রয়োজন হতে পারে।


          .container {
            display: flex;
            flex-wrap: wrap;
            align-content: center;
          }
        
          Common values:

          flex-start
          center
          flex-end
          space-between
          space-around
          space-evenly
          stretch

Important: align-content এবং align-items এক জিনিস নয়। align-items items-এর alignment control করে, আর align-content multiple flex lines-এর spacing/alignment control করে।

7. flex-wrap

Defaultভাবে Flex Items এক লাইনে থাকার চেষ্টা করে।

flex-wrap ব্যবহার করলে items প্রয়োজন অনুযায়ী নতুন line-এ যেতে পারে।


          .container {
            display: flex;
            flex-wrap: wrap;
          }
        
          Common values:

          nowrap
          wrap
          wrap-reverse

Responsive layout-এর জন্য flex-wrap: wrap অনেক useful।

8. gap

Flex Items-এর মধ্যে spacing তৈরি করার সহজ উপায় হলো gap।


          .container {
            display: flex;
            gap: 20px;
          }

এটি items-এর মধ্যে 20px gap তৈরি করবে।

আপনি চাইলে আলাদা row এবং column gap-ও দিতে পারেন:


          .container {
            display: flex;
            row-gap: 20px;
            column-gap: 30px;
          }
অথবা: 

          .container {
            display: flex;
            gap: 20px 30px;
          }
        
          এখানে:

          20px → row gap
          30px → column gap

9. order

order দিয়ে Flex Items-এর visual order পরিবর্তন করা যায়।


          HTML

          

              <div class="item one">One</div>
              <div class="item two">Two</div>
              <div class="item three">Three</div>
          


          CSS

          .three {
              order: -1;
          }

এখন Three আগে দেখা যাবে।

          Default order value হলো:

          order: 0;

Note: order visual order পরিবর্তন করে। HTML-এর source order পরিবর্তন করে না। Accessibility-এর ক্ষেত্রে এটি সাবধানে ব্যবহার করা উচিত।

10. flex-grow

flex-grow নির্ধারণ করে কোনো Flex Item available extra space-এর কত অংশ নিতে পারবে।


          .item {
            flex-grow: 1;
          }

          দুটি item-এর ক্ষেত্রে:

          .item {
              flex-grow: 1;
          }

          .item {
              flex-grow: 1;
          }

তারা available extra space সমানভাবে ভাগ করতে পারে।

11. flex-shrink

Container-এর জায়গা কম হলে কোনো item কতটা shrink করতে পারবে তা flex-shrink দিয়ে control করা যায়।


          .item {
            flex-shrink: 1;
          }

          Default value 
        

          যদি কোনো item shrink করতে না দিতে চান:

          .item {
              flex-shrink: 0;
          }

12. flex-basis

flex-basis Flex Item-এর initial main size নির্ধারণ করে।


          .item {
            flex-basis: 200px;
          }

এটি flex-direction অনুযায়ী width বা height-এর মতো কাজ করতে পারে।

সহজভাবে: flex-basis হলো Flex Item-এর initial size।

13. flex Shorthand

flex-grow, flex-shrink এবং flex-basis একসাথে লেখার জন্য flex shorthand ব্যবহার করা যায়।


          .item {
            flex: 1 1 200px;
          }
        
          এখানে:

          1   → flex-grow
          1   → flex-shrink
          200px → flex-basis
        

          আর খুব common example:

          .item {
              flex: 1;
          }

এটি available space ভাগ করার জন্য খুব useful।

14. align-self

align-self দিয়ে একটি নির্দিষ্ট Flex Item-এর alignment আলাদাভাবে control করা যায়।


          .item-special {
            align-self: flex-end;
          }
        

          যেখানে container-এর অন্য items-এর জন্য:

            .container {
                align-items: center;
            }

তবুও .item-special নিজের alignment পরিবর্তন করতে পারবে।

          Common values:

          auto
          flex-start
          center
          flex-end
          stretch

A Simple Flexbox Examplep

এখন কয়েকটি property একসাথে ব্যবহার করি।


            HTML

            <div class="container">
                <div class="card">Card 1</div>
                <div class="card">Card 2</div>
                <div class="card">Card 3</div>
            </div>

            CSS

            .container {
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 20px;
                flex-wrap: wrap;
            }

            .card {
                flex: 1 1 200px;
                padding: 20px;
            }
    এখানে আমরা:
  • Flexbox চালু করেছি
  • Items center করেছি
  • Items-এর মধ্যে gap দিয়েছি
  • প্রয়োজন হলে নতুন line-এ যাওয়ার সুযোগ দিয়েছি
  • Cards-কে flexible করেছি

Most Used Flexbox Properties


          .container {
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;
              flex-wrap: wrap;
              gap: 20px;
          }

সবচেয়ে বেশি ব্যবহৃত properties:

Property ব্যবহার
display: flex Flexbox চালু করে
flex-direction Row বা column নির্ধারণ করে
justify-content Main Axis-এ items align করে
align-items Cross Axis-এ items align করে
flex-wrap Items-কে নতুন line-এ যেতে দেয়
gap Items-এর মধ্যে spacing দেয় 
      সহজভাবে মনে রাখুন:

      display       → Flexbox শুরু
      direction     → কোন দিকে যাবে
      justify       → Main Axis
      align         → Cross Axis
      wrap          → নতুন line
      gap           → spacing

Common Flexbox Mistakes

1. justify-content এবং align-items গুলিয়ে ফেলা

          মনে রাখুন:

          justify-content → Main Axis
          align-items     → Cross Axis

2. align-content সবসময় কাজ করবে ভাবা

align-content সাধারণত multiple flex lines-এর ক্ষেত্রে গুরুত্বপূর্ণ।


          .container {
              display: flex;
              flex-wrap: wrap;
          }

3. gap না দিয়ে unnecessary margin ব্যবহার করা

আগে spacing-এর জন্য অনেক সময় margin ব্যবহার করা হতো। Flexbox/Grid layout-এ item spacing-এর জন্য gap অনেক পরিষ্কার solution।


          .container {
                display: flex;
                gap: 20px;
          }

4. flex-wrap ভুলে যাওয়া

Small screen-এ অনেক items থাকলে:


          .container {
              display: flex;
              flex-wrap: wrap;
          }

responsive layout তৈরি করতে সাহায্য করতে পারে।

Flexbox vs CSS Grid

দুটিই powerful layout system, কিন্তু তাদের use case কিছুটা আলাদা।

Flexbox CSS Grid
One-dimensional layout Two-dimensional layout
Row অথবা column Row এবং column
Component-level layout Larger page layout
Navbar Page sections
Buttons/cards alignment Complex grid layouts 
          সহজভাবে মনে রাখুন:

          Flexbox → One direction
          Grid → Rows + Columns

তবে এটি কঠোর rule নয়। Real projects-এ দুটিকে একসাথেও ব্যবহার করা হয়।

Mini Project — Responsive Card Layout

এখন Flexbox দিয়ে একটি simple responsive card layout তৈরি করি।


          HTML

          <section class="cards">
              <article class="card">
                  <h2>HTML</h2>
                  <p>Learn the structure of modern websites.</p>
                  <a href="#">Learn More</a>
              </article>

              <article class="card">
                  <h2>CSS</h2>
                  <p>Learn how to style and design websites.</p>
                  <a href="#">Learn More</a>
              </article>

              <article class="card">
                  <h2>JavaScript</h2>
                  <p>Learn how to add interaction to websites.</p>
                  <a href="#">Learn More</a>
              </article>
          </section>
        

          CSS

          .cards {
              display: flex;
              flex-wrap: wrap;
              gap: 20px;
          }

          .card {
              flex: 1 1 250px;
              padding: 20px;
              border: 1px solid #ddd;
              border-radius: 8px;
          }

          .card a {
              display: inline-block;
              margin-top: 10px;
          }

এখানে screen ছোট হলে cards প্রয়োজন অনুযায়ী নতুন line-এ চলে যাবে।

এটাই Flexbox-এর একটি practical use case।

Quick Flexbox Cheat Sheet

          display: flex
          flex-direction
          justify-content
          align-items
          align-content
          flex-wrap
          gap
          order
          flex-grow
          flex-shrink
          flex-basis
          flex
          align-self
        
          সব property একসাথে মুখস্থ করার প্রয়োজন নেই। প্রথমে এই core properties ভালোভাবে বুঝুন:

          display
          flex-direction
          justify-content
          align-items
          flex-wrap
          gap

          তারপর প্রয়োজন অনুযায়ী:

          flex-grow
          flex-shrink
          flex-basis
          flex
          order
          align-self
          align-content

          শিখুন।

Practice Challenge

নিজে একটি 3-card responsive layout তৈরি করুন।

    Requirements:
  • Flexbox ব্যবহার করুন
  • Cards-এর মধ্যে gap দিন
  • flex-wrap ব্যবহার করুন
  • প্রতিটি card-এর minimum size রাখুন
  • Mobile screen-এ cards যেন সুন্দরভাবে stack করে

নিজে আগে চেষ্টা করুন। তারপর solution-এর সঙ্গে compare করুন।

Frequently Asked Questions

What is CSS Flexbox?

CSS Flexbox হলো একটি one-dimensional layout system যা elements-কে row বা column-এ arrange এবং align করতে সাহায্য করে।

What is the difference between Flexbox and Grid?

Flexbox মূলত one-dimensional layout-এর জন্য useful, আর CSS Grid rows এবং columns—দুই dimension-এর layout তৈরি করতে পারে।

How do I center an element with Flexbox?


          .container {
              display: flex;
              justify-content: center;
              align-items: center;
          }

Is Flexbox responsive?

Flexbox নিজে একটি responsive design system নয়, তবে flex-wrap, flexible sizes এবং media queries-এর সঙ্গে ব্যবহার করে responsive layouts তৈরি করা যায়।

What's Next?

Flexbox শেখার পর আমাদের next topic হলো:

CSS Grid — Complete Guide

CSS Grid ব্যবহার করে আমরা rows এবং columns-এর মাধ্যমে আরও complex layouts তৈরি করব।

CSS Level 2 Roadmap

Final Takeaway

Flexbox হলো modern CSS layout-এর একটি গুরুত্বপূর্ণ foundation।

শুধু property মুখস্থ না করে Main Axis, Cross Axis, alignment এবং flexible sizing কীভাবে কাজ করে তা বুঝুন।

তারপর ছোট ছোট layout তৈরি করে practice করুন।

Learn → Practice → Build → Improve.