एक क्रांतिकारी स्टाईल ज्यांनी युसर इंटरफेस डेव्हलपर चे आयुष्य खूप सोपे केले
पूर्वी जे रचना साधण्यासाठी म्हणजेच अलिंमेन्ट साधण्यासाठी अनेक कष्ट घ्यावे लागत होते, ते आता अगदी सहज करता येतात
उदाहरण सांगायचं तर व्हर्टिकल अलिंमेन्ट valign=”middle” हे आपण टेबल असताना वापरात होतो. नंतर DIV संरचना आल्यावर कठीण झालं. स्क्रिप्ट वापरावी लागत होती, कंटेनरचा आकार बदलला कि पुन्हा त्रुटी निर्माण होत होत्या, इतकंच काय तर प्रत्येक browser मध्ये वेगळी CSS लिहावी लागत होती. पण आता नवीन फ्लेक्सबॉक्सने फक्त सोपं नाही तर त्याही पुढे बरंच काही करता येतं.
फ्लेबॉक्स CSS३ चा नवीन भाग असून त्याने विविध घटकांना (elements) एकमेकांपासून नीट मांडण्यास(alignment) सोपं केलंय. आणि तेही वेगवेगळ्या दिशेत (directions) व आराखड्यात(layout).
फ्लेक्सबॉक्स वापरण्यामागची मुख्य कल्पना म्हणजे कंटेनरला उपलब्ध जागेत वाढण्याची किंवा लहान होण्याची क्षमता देणे.
फ्लेक्सबॉक्स ने फ्लोट लेआऊटची जागा घेतली. कारण फ्लेक्सबॉक्सने आपण कमी, सहज समजण्या योग्य आणि तार्किक कोड लिहू शकतो.
हे शब्द नीट लक्षात ठेव, कारण पुढील पूर्ण प्रशिक्षणात हे सतत वापरात असतील
एखाद्या container ला जेव्हा आपण display:flex हि स्टाईल देतो तेव्हा तो flex-container होतो आणि तो त्याच्यातील child elements ला flex-items मध्ये आपोआप convert करतो. आता ते एकाखाली एक ना दिसता एकमेकांच्या बाजूला दिसू लागतात फ्लेक्सबॉक्स मध्ये आपण X-axis ला main-axis आणि Y-axis ला cross-axis म्हणतो
.container {
display:flex;
}
सगळ्या advanced browser मध्ये चालण्यासाठी browser hacks टाकणे चांगले
display:flex प्रमाणे display:inline-flex हि वापरात आहे, display:flex जिथे पूर्ण जागा घेते तिथे display:inline-flex फक्त हवी तितकीच जागा घेते. हे चित्र पाहून तुम्हाला सहज समजेन
आता आपण flexbox च्या सर्व properties आणि values समजून घेऊ. सर्वप्रथम flex-direction च्या values समजून घेऊ
आपण flex-items ची दिशा इथे ठरवतो, ते कुठून चालू झाले पाहिजे आणि कुठे संपले पाहिजे. flex-direction ह्या property च्या ४ values आहेत.
row हि default value असून ती देण्याची तशी फारशी गरज नसते, फक्त कधी एखादी आधीच दिलेली स्टाईल मिटवून नॉर्मल करण्यासाठी आपण वापरतो. row valule flex-items एका बाजूला एक, डावीकडून उजवीकडे एक रेषेत करते , ते main-axis वर असतात
row-reverse value main-axis वर flex-items उजवीकडून डावीकडे एका रेषेत करते
column value main-axis ला cross-axis करते, म्हणजे flex-items वरून खाली एका खाली एक करते
column-reverse value cross-axis वर flex-items खालून वर करते
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 म्हणजे ४ रिकाम्या जागा तयार होणार मग ७०/४ = १७.५%