फ्लेक्स एलिमेंट्स को पैरेंट के साथ मार्जिन में अलाइन करना

justify-content प्रॉपर्टी में space-around वैल्यू पहले और आखिरी फ्लेक्स एलिमेंट्स को पैरेंट के किनारे से मार्जिन देती है।

पहली नज़र में ऐसा लग सकता है कि एलिमेंट्स के बीच की दूरी और बाहरी एलिमेंट्स और पैरेंट के बीच की दूरी बराबर होगी, हालाँकि, ऐसा नहीं है - एलिमेंट्स के बीच की दूरी पैरेंट और बाहरी एलिमेंट के बीच की दूरी से 2 गुना अधिक होगी।

आइए एक उदाहरण देखें:

css.parent {
  display: flex;
  justify-content: space-around;
}

कोड निष्पादित करने का परिणाम: