फ्लेक्स कंटेनर

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

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

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

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

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

flex-wrap

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