# आम फ्लेक्स पैटर्न — सीएसएस

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

> नैवबार, बराबर-ऊँचाई के कार्ड, और सेंटरिंग — रोज़ लिखे जाने वाले पैटर्न।

## space-between वाला नैवबार

बाईं ओर लोगो, दाईं ओर लिंक, एक ही रूल से।

```css
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
}
```

## बराबर-ऊँचाई के कार्ड

फ्लेक्स आइटम डिफ़ॉल्ट रूप से सबसे लंबे सिबलिंग जितना खिंच जाते हैं — कोई अतिरिक्त सीएसएस की ज़रूरत नहीं।

```css
.cards {
  display: flex;
  gap: 16px;
  align-items: stretch;  /* default */
}
.card {
  flex: 1;
  padding: 16px;
}
```

## सेंटरिंग की एक पंक्ति

`display: flex; justify-content: center; align-items: center;` किसी भी आकार की चीज़ को पूरी तरह बीच में ले आता है।