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 उजवीकडून डावीकडे आणि खालून वरती सामावून घेतले जातात

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