Flexbox అంటే ఏమిటి మరియు దానితో కంటెంట్‌ను ఎలా సెంటర్ చేస్తారు?

Question

Accepted Answer

**Flexbox** అనేది ఒక-డైమెన్షనల్ లేআউట్ సిస్టమ్ — ఇది ఐటెమ్‌లను ఒకే **రో** లేదా **కాలమ్‌**లో ఏర్పాటు చేస్తుంది మరియు ఆ లైన్‌ను వరకు స్థలాన్ని పంపిణీ చేస్తుంది. ఇది ఫ్లోట్‌లు మరియు హ్యాక్‌ల అవసరమైన సమలేఖన మరియు స్పేసింగ్ సమస్యలకు ఆధునిక సమాధానం.

```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 నేవిగేషన్ బార్‌లు, బటన్ గ్రూపులు, కార్డ్ రేపు, సెంటరింగ్ మరియు ఏదైనా "ఐటెమ్‌ల లైన్" లేআউట్ కోసం రోజువారీ సాధనం.

ప్రధాన/క్రాస్ అక్ష మోడల్‌ను అర్థం చేసుకోవడం (మరియు `flex-direction` మార్చినప్పుడు `justify-content`/`align-items` అర్థం మారుతుంది) కీ మానసిక నమూనా.

1D లేআউట్‌ల కోసం Flexbox ఉపయోగించండి మరియు 2D కోసం Grid ఉపయోగించండి.