फ्लेक्स कंटेनर के आइटम को उसके मेन अक्ष के साथ स्पेस वितरित करके अलाइन करने के लिए, हम CSS के justify-content प्रॉपर्टी का उपयोग करते हैं।
सिंटैक्स
CSS justify-content प्रॉपर्टी का सिंटैक्स निम्नानुसार है:
Selector { display: flex; justify-content: /*value*/ }
उदाहरण 1 (space-between)
निम्न उदाहरण CSS justify-content प्रॉपर्टी को दर्शाते हैं।
<!DOCTYPE html> <html> <head> <style> #root { margin: 5%; display: flex; justify-content: space-between; } #one { float:left; box-shadow: inset 0 0 34px #b798e1; } #two { box-shadow: inset 0 0 34px #236fa0; } #three { box-shadow: inset 0 0 34px #43946a; } .element { padding: 7%; border-radius: 15%; } </style> </head> <body> <div id="root"> <div class="element" id="one">1</div> <div class="element" id="two">2</div> <div class="element" id="three">3</div> </div> </body> </html>
इससे निम्न आउटपुट मिलता है:
उदाहरण 2 (space-evenly)
<!DOCTYPE html> <html> <head> <style> #root { margin: 5%; padding: 2%; display: flex; justify-content: space-evenly; box-shadow: inset 0 10px 40px magenta; font-weight: bold; } div > div { padding: 2%; border-radius: 15%; } div:nth-of-type(even) { box-shadow: inset 2px 2px 20px orange; } div > div:nth-of-type(odd) { box-shadow: inset 2px 2px 20px lightblue; } </style> </head> <body> <div id="root"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> </body> </html>
इससे निम्न आउटपुट मिलता है:
