# फ्लेक्स कंटेनर — सीएसएस

Source: https://www.geekswithgeeks.com/hi/css/css-flex-container

> एक पंक्ति — display: flex — पेरेंट को एक लचीले लेआउट में बदल देती है।

## मुख्य अक्ष और क्रॉस अक्ष

`display: flex` बच्चों को एक **मुख्य अक्ष** (डिफ़ॉल्ट रूप से row) पर सजाता है। `justify-content` मुख्य अक्ष पर अलाइन करता है, `align-items` **क्रॉस अक्ष** पर।

## मुख्य कंटेनर प्रॉपर्टी

यह तीन आइटम को क्षैतिज और लंबवत दोनों तरह से बीच में लाता है।

```css
.row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
```

## flex-wrap

डिफ़ॉल्ट रूप से आइटम एक पंक्ति में सिकुड़ जाते हैं। `flex-wrap: wrap` उन्हें नई पंक्ति में जाने देता है — रिस्पॉन्सिव पंक्तियों के लिए ज़रूरी।