ਫਲੈਕਸਬਾਕਸ ਕੀ ਹੈ ਅਤੇ ਤੁਸੀਂ ਇਸ ਨਾਲ ਸਮਗਰੀ ਨੂੰ ਕੇਂਦਰ ਵਿੱਚ ਕਿਵੇਂ ਰੱਖਦੇ ਹੋ?

Question

IT Interview Practice · Accepted Answer

**Flexbox** ਇੱਕ ਇੱਕ-ਅਯਾਮੀ ਲੇਆਉਟ ਸਿਸਟਮ ਹੈ — ਇਹ ਆਈਟਮ ਨੂੰ ਇੱਕ ਸਿੰਗਲ **row** ਜਾਂ **column** ਵਿੱਚ ਵਿਵਸਥਿਤ ਕਰਦਾ ਹੈ ਅਤੇ ਉਸ ਲਾਈਨ ਦੇ ਨਾਲ ਸਪੇਸ ਨੂੰ ਵੰਡਦਾ ਹੈ। ਇਹ ਸਮੱਸਿਆ alignment ਅਤੇ spacing ਸਮੱਸਿਆਵਾਂ ਦਾ ਆਧੁਨਿਕ ਜਵਾਬ ਹੈ ਜੋ ਪਹਿਲਾਂ floats ਅਤੇ ਹੈਕਸ ਦੀ ਲੋੜ ਸੀ।

```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** (ਜਿਸ ਦਿਸ਼ਾ ਵਿੱਚ ਆਈਟਮ ਵਹਿਦੇ ਹਨ) ਅਤੇ ਇੱਕ **cross axis** (ਲੰਬਵਤ) ਹੈ। ਗੁਣ ਉਹਨਾਂ ਨਾਲ ਮੈਪ ਕਰਦੇ ਹਨ:

```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;
}
```

ਉਹ ਤਿੰਨ ਲਾਈਨਾਂ ਇੱਕ child ਨੂੰ horizontally ਅਤੇ vertically ਦੋਨਾਂ ਤਰਫ ਕੇਂਦਰ ਵਿੱਚ ਰੱਖਦੀਆਂ ਹਨ — ਇੱਕ ਕੰਮ ਜੋ 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 ਲਈ ਰੋਜ਼ਮਰਾਂ ਦਾ ਟੂਲ ਹੈ।

main/cross axis ਮਾਡਲ ਨੂੰ ਸਮਝਣਾ (ਅਤੇ ਇਹ ਕਿ `justify-content`/`align-items` swap ਮਤਲਬ ਬਦਲਦੇ ਹਨ ਜਦੋਂ ਤੁਸੀਂ `flex-direction` ਨੂੰ ਬਦਲਦੇ ਹੋ) ਮੁੱਖ ਮਾਨਸਿਕ ਮਾਡਲ ਹੈ।

1D layouts ਲਈ Flexbox ਅਤੇ 2D ਲਈ Grid ਵਰਤੋ।

ਦੋ axes

ਪਰਿਪੂਰਨ ਕੇਂਦਰ — ਮਸ਼ਹੂਰ ਵਰਤੋਂ ਦਾ ਮਾਮਲਾ

ਆਮ ਪੈਟਰਨ

ਇਹ ਮਹੱਤਵਪੂਰਨ ਕਿਉਂ ਹੈ

ਸੰਬੰਧਿਤ ਸਵਾਲ