Flexbox म्हणजे काय आणि तुम्ही त्यासह मजकूर कसे केंद्रीभूत करता?

Question

Accepted Answer

**Flexbox** एक-आयामी लेआउट प्रणाली आहे — हे आयटम एका **पंक्ती** किंवा **स्तंभ** मध्ये व्यवस्थित करते आणि त्या ओळीच्या बाजूने जागा वितरित करते. हे संरेखन आणि अंतर समस्यांचे आधुनिक उत्तर आहे जेव्हा पूर्वी float आणि 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) */
}
```

## दोन अक्ष

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 navbars, बटण गट, कार्ड पंक्तीची, केंद्रण, आणि कोणतेही "आयटमचीची" लेआउटसाठी दैनिक साधन आहे.

मुख्य/क्रॉस अक्ष मॉडेल समजणे (आणि जेव्हा आप `flex-direction` बदलता तेव्हा `justify-content`/`align-items` अर्थ बदलतात) हा मुख्य मानसिक मॉडेल आहे.

1D लेआउटसाठी Flexbox आणि 2D साठी Grid वापरा.