Flexbox কী এবং আপনি এটির সাথে কন্টেন্ট কেন্দ্রীভূত করতে কীভাবে করেন?

Question

Accepted Answer

**Flexbox** একটি একমাত্রিক লেআউট সিস্টেম — এটি আইটেমগুলিকে একটি একক **সারি** বা **কলামে** সাজায় এবং সেই লাইনের সাথে স্থান বিতরণ করে। এটি সারিবদ্ধতা এবং রিক্তি সমস্যাগুলির আধুনিক সমাধান যা আগে float এবং হ্যাকের প্রয়োজন ছিল।

```css
.container {
  display: flex;              /* turn on flex; children become flex items */
  flex-direction: row;       /* main axis: row (default) or column */
  gap: 1rem;                 /* space BETWEEN items (no margin hacks) */
}
```

## দুটি অক্ষ

Flexbox একটি **প্রধান অক্ষ** (যে দিকে আইটেমগুলি প্রবাহিত হয়) এবং একটি **ক্রস অক্ষ** (লম্বভাবে) রয়েছে। বৈশিষ্ট্যগুলি তাদের সাথে মানচিত্র করে:

```css
.container {
  justify-content: center; /* aligns along the MAIN axis */
  align-items: center;     /* aligns along the CROSS axis */
}
```

## নিখুঁত কেন্দ্রীভূতকরণ — বিখ্যাত ব্যবহারের ক্ষেত্র

```css
.center {
  display: flex;
  justify-content: center; /* horizontal (main axis = row) */
  align-items: center;     /* vertical (cross axis) */
  min-height: 100vh;
}
```

েই তিনটি লাইন একটি চাইল্ডকে অনুভূমিকভাবে এবং উল্লম্বভাবে কেন্দ্রীভূত করে — এটি একটি কাজ যা Flexbox এর আগে কুখ্যাত কঠিন ছিল।

## সাধারণ প্যাটার্ন

```css
/* push items apart: logo left, menu right */
.navbar { display: flex; justify-content: space-between; align-items: center; }

/* wrap to new lines when items don't fit */
.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
```

`justify-content` বিকল্পগুলির মধ্যে রয়েছে `flex-start`, `center`, `flex-end`, `space-between`, `space-around`, `space-evenly`।

## এটি কেন গুরুত্বপূর্ণ

Flexbox নেভবার, বোতাম গোষ্ঠী, কার্ড সারি, কেন্দ্রীভূতকরণ এবং যেকোনো "আইটেমের লাইন" লেআউটের জন্য দৈনন্দিন সরঞ্জাম।

প্রধান/ক্রস অক্ষ মডেল বোঝা (এবং যে `justify-content`/`align-items` যখন আপনি `flex-direction` পরিবর্তন করেন তখন অর্থ স্থানান্তর করে) হল মূল মানসিক মডেল।

1D লেআউটের জন্য Flexbox এবং 2D এর জন্য Grid ব্যবহার করুন।