Flexbox کیا ہے اور آپ اس کے ساتھ مواد کو مرکز میں کیسے رکھتے ہیں؟

Question

Accepted Answer

**Flexbox** ایک یک جہتی layout system ہے — یہ items کو ایک واحد **row** یا **column** میں ترتیب دیتا ہے اور اس لائن کے ساتھ space کو تقسیم کرتا ہے۔ یہ alignment اور spacing کے مسائل کا جدید حل ہے جس کے لیے پہلے floats اور hacks کی ضرورت ہوا کرتی تھی۔

```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) */
}
```

## دونوں axes

Flexbox کے پاس ایک **main axis** (جس کی سمت میں items بہتے ہیں) اور ایک **cross axis** (کھڑی سمت) ہے۔ Properties ان سے map ہوتی ہیں:

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

## مکمل centering — مشہور استعمال کی صورت

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

yہ تین لائنیں ایک child کو افقی اور عمودی دونوں طریقوں سے مرکز میں رکھتی ہیں — یہ کام 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 navbars، button groups، card rows، centering، اور کسی بھی "line of items" layout کے لیے روزمرہ کا tool ہے۔

main/cross axis کے ماڈل کو سمجھنا (اور یہ کہ `justify-content`/`align-items` اپنے معنی کو تبدیل کر دیتے ہیں جب آپ `flex-direction` کو تبدیل کرتے ہیں) اہم ذہنی ماڈل ہے۔

1D layouts کے لیے Flexbox اور 2D کے لیے Grid استعمال کریں۔