Categories
FlexBox (फ्लेक्सबॉक्स) प्रशिक्षण

justify-content (flexbox properties)

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 म्हणजे ४ रिकाम्या जागा तयार होणार
मग ७०/४ = १७.५%