आम फ्लेक्स पैटर्न

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

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

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

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

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

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

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

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