justify-content हि महत्वाची property असून तिला ६ values आहेत त्या समजून घेऊ
flex-start value सगळे flex-items flex-container च्या सुरवातीला रचते
flex-end value सगळे flex-items flex-container च्या शेवटी रचते
center value सगळे flex-items flex-container च्या मध्ये रचते त्यामुळे सगळे flex-items मध्ये येऊन दोन्ही बाजूला जागा सामान सुटते
space-between value सगळे flex-items flex-container च्या उपलब्ध जागेमध्ये पसरवून रचते आणि पहिला व शेवटचा flex-items हा सुरवात व शेवटी असून मधल्या जागेत उरलेले flex-items सामान अंतर सोडून विखुरले जातात
space-around value सगळे flex-items flex-container च्या उपलब्ध जागेमध्ये पसरवून रचते आणि सर्व flex-items ला आजू बाजूला सामान जागा ठेवते
space-evenly value सगळे flex-items flex-container च्या उपलब्ध जागेमध्ये पसरवून रचते आणि सर्व flex-items मधली जागा हि सामान असते
हे जरा नीट समजून घ्यावं लागेन.
एकूण उपलब्ध जागा १००%,
flex-item १०% width चे ३ म्हणजे ३०% flex-items चे
उरले ७०%.
space-around मध्ये सगळ्या flex-items ला आजू बाजूला ११.६% इतकी जागा भेटली, कारण ३ flex-item च्या प्रत्येकी २ बाजू म्हणजे ७०/६=११.६
पण त्यामुळे दोन flex-items मध्ये २३.२% जागा निर्माण झाली
तर space-evenly मध्ये सगळ्या flex-items ला सामान जागा ना देता, ते नीट विखुरण्यासाठी एक calculation केले आहे flexbox ने. ते समजून घेऊ कसं आहे.
आता ३ flex-item म्हणजे ४ रिकाम्या जागा तयार होणार
मग ७०/४ = १७.५%