Category: प्रशिक्षण

• 

एक क्रांतिकारी स्टाईल ज्यांनी युसर इंटरफेस डेव्हलपर चे आयुष्य खूप सोपे केले

पूर्वी जे रचना साधण्यासाठी म्हणजेच अलिंमेन्ट साधण्यासाठी अनेक कष्ट घ्यावे लागत होते, ते आता अगदी सहज करता येतात

उदाहरण सांगायचं तर व्हर्टिकल अलिंमेन्ट
valign=”middle”
हे आपण टेबल असताना वापरात होतो. नंतर DIV संरचना आल्यावर कठीण झालं. स्क्रिप्ट वापरावी लागत होती, कंटेनरचा आकार बदलला कि पुन्हा त्रुटी निर्माण होत होत्या, इतकंच काय तर प्रत्येक browser मध्ये वेगळी CSS लिहावी लागत होती.
पण आता नवीन फ्लेक्सबॉक्सने फक्त सोपं नाही तर त्याही पुढे बरंच काही करता येतं.

1. फ्लेबॉक्स CSS३ चा नवीन भाग असून त्याने विविध घटकांना (elements) एकमेकांपासून नीट मांडण्यास(alignment) सोपं केलंय. आणि तेही वेगवेगळ्या दिशेत (directions) व आराखड्यात(layout).
   
2. फ्लेक्सबॉक्स वापरण्यामागची मुख्य कल्पना म्हणजे कंटेनरला उपलब्ध जागेत वाढण्याची किंवा लहान होण्याची क्षमता देणे.
   
3. फ्लेक्सबॉक्स ने फ्लोट लेआऊटची जागा घेतली. कारण फ्लेक्सबॉक्सने आपण कमी, सहज समजण्या योग्य आणि तार्किक कोड लिहू शकतो.
   

हे शब्द नीट लक्षात ठेव,
कारण पुढील पूर्ण प्रशिक्षणात हे सतत वापरात असतील

एखाद्या 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 टाकणे चांगले

.container {
   display: -webkit-box;
   display: -moz-box;  
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
}

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 खालून वर करते

हे चित्र पाहून सहज समजेन

flex-wrap च्या ३ values आहेत

wrap हि default value आहे. ह्यात flex-items डावीकडून उजवीकडे आणि वरून खाली आपोआप सामावून घेतले जातात

nowrap value मध्ये flex-container बाहेर flex-items चालले जातात पण ते एकाच रेषेत राहतात

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

justify-content alignment main-axis cross-axis align-items flex-start flex-end center baseline stretch

ज्या प्रमाणे justify-content main-axis वर alignment दाखवते तसे align-items cross-axis वर आपले alignment दाखवते

align-items च्या ५ values आहेत