सीएसएस फ्लेक्सबॉक्स मॉडल स्थापित सीएसएस बॉक्स मॉडल को बेहतर बनाने के लिए बनाया गया था। फ्लेक्सबॉक्स मॉडल में अभी भी बॉक्स मॉडल (मार्जिन, पैडिंग, बॉर्डर और सामग्री) के प्रमुख तत्व शामिल हैं, लेकिन कंटेनर / माता-पिता के बच्चों के साथ स्थान को सर्वोत्तम रूप से भरने के लिए लचीलापन प्रदान करता है।
यह ट्यूटोरियल आपको फ्लेक्सबॉक्स मॉड्यूल को थोड़ा बेहतर समझने में मदद करेगा ताकि आप अपनी साइटों को अधिक प्रतिक्रियाशील बनाना शुरू कर सकें।
मूल फ्लेक्सबॉक्स मॉडल प्रदर्शन के लिए निम्नलिखित स्टार्टर कोड है - कृपया साथ चलें जैसे हम फ्लेक्सबॉक्स के बारे में बात करते हैं!
<!DOCTYPE html>
<head>
<title>Flexbox</title>
<style>
* {
box-sizing: border-box;
font-family: 'Roboto'
}
.parent-container {
height: 700px;
background: green;
width: 700px;
padding: 20px;
}
.child-item {
height: 200px;
width: 200px;
margin: 0px;
padding: 20px;
}
.child-item:first-child {
background: orange;
}
.child-item.one {
background: purple;
}
.child-item.two {
background: aliceblue;
}
.child-item.three {
background: grey;
}
.child-item.four {
background: pink;
}
.child-item.five {
background: yellowgreen;
}
.child-item.six {
background: red;
}
.child-item.seven {
background: blanchedalmond;
}
.child-item.eight {
background: white;
}
.child-item.nine {
background: lightblue;
}
.child-item.nine {
background: darkred;
}
.child-item:last-child {
background: yellow;
}
</style>
</head>
<body>
<div class="parent-container">
<div class="child-item">Lisa Simpson</div>
<div class="child-item one">Bart Simpson</div>
<div class="child-item two">Maggie Simpson</div>
<div class="child-item three">Homer Simpson</div>
<div class="child-item four">Marge Simpson</div>
<div class="child-item five">Grampa Simpson</div>
<div class="child-item six">Santa's Little Helper</div>
<div class="child-item seven">Apu Nahasapeemapetilon</div>
<div class="child-item eight">Moe Szyslak</div>
<div class="child-item nine">Ned Flanders</div>
<div class="child-item ten">Snowball II</div>
</div>
<script src="" async defer></script>
</body>
</html> पेरेंट कंटेनर (फ्लेक्सबॉक्स) गुण
डिस्प्ले:फ्लेक्स
डिस्प्ले प्रॉपर्टी में कई मान होते हैं जिनका उपयोग हम अपने कंटेनरों को स्क्रीन पर रखने के लिए कर सकते हैं। आपने पहले से ही ब्लॉक, इनलाइन-ब्लॉक, कोई नहीं, छिपा हुआ, इनलाइन देखा होगा, लेकिन अभी हम जिस पर ध्यान केंद्रित करने जा रहे हैं उसे फ्लेक्स कहा जाता है .
सबसे पहले, मैं आपको एक बड़े कंटेनर की कल्पना करना चाहता हूं - एक खजाना चेस्ट, एक खिलौना बॉक्स या एक कार्डबोर्ड बॉक्स - और फिर कंटेनर के अंदर आइटम डालने की कल्पना करें। बड़े कंटेनर को हम पैरेंट . कहते हैं या फ्लेक्सबॉक्स और कंटेनर के अंदर जाने वाले छोटे आइटम बच्चे . हैं या फ्लेक्स आइटम।
जब हम display: flex . जोड़ते हैं एक मूल कंटेनर के लिए, संपत्ति उस कंटेनर और अकेले उस कंटेनर को असाइन की जाती है - बच्चे संपत्ति का उत्तराधिकारी नहीं होते हैं (हालांकि, वे अपने स्वयं के कंटेनरों के लिए संपत्ति का उपयोग कर सकते हैं जो उनके को प्रभावित करेगा। बच्चे)।
यह संपत्ति उन सभी प्रकार की अन्य संपत्तियों को खोलती है जिनका हम उपयोग कर सकते हैं जो हम पहले नहीं कर पाए थे:flex-direction , justify-content , align-items , align-self , flex-wrap और flex-flow .
ऊपर कोड संपादक चलाएँ। अभी, आपको पैरेंट के अंदर एक बड़ा हरा कंटेनर, पैरेंट कंटेनर और 11 छोटे कंटेनर, चाइल्ड कंटेनर देखना चाहिए।
चाइल्ड कंटेनरों का ओरिएंटेशन एक दूसरे के ऊपर होता है क्योंकि डिफ़ॉल्ट display: block . होता है . यदि आपको याद हो, जब हम display: block . का उपयोग करते हैं , कंटेनर पूरी पंक्ति में है। मार्जिन का डिफ़ॉल्ट मूल कंटेनर की चौड़ाई तक फैलता है, जिसके परिणामस्वरूप दोनों बच्चे कंटेनर एक दूसरे के ऊपर होते हैं।
81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।
बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।
इसके विपरीत, display: flex . का उपयोग करके फ्लोट और वर्टिकल-एलाइन जैसे पुराने बॉक्स मॉडल गुणों का उपयोग किए बिना हमें आसानी से चाइल्ड कंटेनरों को किसी भी तरह से पैरेंट कंटेनर में रखने की अनुमति देता है।
display: flex जोड़ने का प्रयास करें कोड संपादक में स्टाइल टैग में CSS को ताकि पैरेंट कंटेनर का CSS इस तरह दिखे:
.parent-container {
height: 700px;
background: green;
width: 700px;
padding: 20px;
display: flex;
display: flex जोड़ना .parent-container . के लिए परिणामस्वरूप बाल कंटेनरों के उन्मुखीकरण में परिवर्तन होगा। एक बार हिट करने के बाद, अब आपको बच्चे के कंटेनरों को साथ-साथ देखना चाहिए।
display: flex . का उपयोग करके display: block . के बजाय , डिफ़ॉल्ट मार्जिन 0 पर सेट है। फिर हम इसमें हेरफेर कर सकते हैं, हालांकि हम फिट देखते हैं!
फ्लेक्स-दिशा
फ्लेक्स-दिशा गुण हमारे कंटेनर की मुख्य धुरी को सेट करता है। फ्लेक्स कंटेनर में डिफ़ॉल्ट सेटिंग पंक्ति है। display: flex के साथ पैरेंट कंटेनर सेट अप करते समय , जब तक आपको अपनी सामग्री को एक कॉलम में रखने की आवश्यकता नहीं है, तब तक एक फ्लेक्स-दिशा स्थापित करने की कोई आवश्यकता नहीं है।
डिफ़ॉल्ट दिशा में मुख्य अक्ष बाएं से दाएं है और क्रॉस अक्ष ऊपर से नीचे है, जैसा कि यहां देखा गया है:
आइए जोड़ने का प्रयास करें flex-direction: column हमारे .parent-container . पर उपरोक्त कोड संपादक में। क्या होता है जब आप दबाते हैं?
ऐसा लगता है कि जब हम flex-direction switch स्विच करते हैं तो कुल्हाड़ियां पलट जाती हैं कॉलम के लिए:हमारी मुख्य धुरी क्या थी क्रॉस अक्ष बन गई और फिर हमारी क्रॉस अक्ष क्या थी मुख्य धुरी बन गई, जैसा कि नीचे दिखाया गया है:
नतीजतन, हमारे उदाहरण में हमारे बच्चों के कंटेनरों ने अपनी कुल्हाड़ियों को फ़्लिप किया! तो अब बाल कंटेनर एक बार फिर एक दूसरे के ऊपर हैं।
flex-direction के बारे में याद रखने वाली सबसे बड़ी बात यह है कि मुख्य अक्ष की दिशा आपके flex-direction . के मान से मेल खाती है संपत्ति (स्तंभ ऊपर से नीचे है, पंक्ति बाएं से दाएं है)।
औचित्य-सामग्री मुख्य अक्ष पर रिक्ति से संबंधित है और संरेखण-वस्तुएं स्वयं को क्रॉस अक्ष के चारों ओर रिक्ति के साथ संबंधित करती हैं। हम थोड़ी देर बाद उन संपत्तियों में शामिल होंगे।
फ्लेक्स-दिशा के लिए दो अन्य संभावनाएं हैं:row-reverse और column-reverse . ये गुण पंक्ति और स्तंभ के समान हैं, लेकिन flex-items रिवर्स ऑर्डर में, रो-रिवर्स के मामले में दाएं से बाएं, और कॉलम-रिवर्स के लिए नीचे से ऊपर तक रखी जाती हैं।
इन विशेष मूल्यों के लिए उपयोग का मामला तब आता है जब आपको अपने पृष्ठ पर वेब से मोबाइल या टैबलेट पर एक अलग लेआउट या ऑर्डर की आवश्यकता होती है।
फ्लेक्स-रैप
अब तक हमने सीखा है कि कैसे display: flex माता-पिता के चाइल्ड कंटेनरों को प्रभावित करता है और फिर उन चाइल्ड कंटेनरों के प्रवाह को एक पंक्ति या एक कॉलम में कैसे हेरफेर किया जाए। क्या होगा यदि माता-पिता का आकार कमरे से बाहर चला जाए? क्या होता है? और हम इसे कैसे ठीक कर सकते हैं?
उत्तर flex-wrap . नामक संपत्ति के रूप में आता है . डिफ़ॉल्ट रूप से, flex-wrap nowrap . पर सेट है . इसका मतलब है कि चाइल्ड कंटेनर पैरेंट कंटेनर को ओवरफ्लो कर सकते हैं, जिससे अवांछित लेआउट समस्याएं हो सकती हैं। आइए flex-wrap: wrap जोड़ने का प्रयास करें; .parent-container . के लिए और देखें क्या होता है:
यहां कंटेनर का लेआउट बहुत अच्छा लगता है। फ्लेक्स-रैप सभी बच्चों के घटकों को ले जाएगा, जब तक कि यह पैरेंट कंटेनर की चौड़ाई को हिट न कर दे, तब तक अगली पंक्ति में ले जाएँ और प्रक्रिया को दोहराने के लिए और अधिक चाइल्ड कंटेनर जोड़ने के लिए अगली पंक्ति में जाएँ जब तक कि सभी कंटेनर प्रदर्शित न हो जाएँ।
फ्लेक्स-रैप में तीन उपलब्ध गुण हैं:अब्रैप, रैप और रैप-रिवर्स। रैप-रिवर्स रैप के समान है सिवाय इसके कि यह ऊपर से नीचे की बजाय नीचे से ऊपर की ओर बहता है।
फ्लेक्स-प्रवाह
फ्लेक्स-फ्लो flex-direction के लिए शॉर्टहैंड है और flex-wrap . सिंटैक्स flex-flow: column wrap है यदि आप चाहते हैं कि आपकी फ्लेक्स-दिशा कॉलम हो और आपका फ्लेक्स-रैप रैप हो। flex-flow: row nowrap डिफ़ॉल्ट मान है।
औचित्य-सामग्री
औचित्य सामग्री संपत्ति मूल कंटेनर के मुख्य अक्ष के साथ संरेखण से संबंधित है। यह आपके flex-items . को वितरित करने में मदद करता है आपके द्वारा आवश्यक स्थान की गणना किए बिना मुख्य अक्ष के पार। justify-content . के लिए सबसे अधिक उपयोग किए जाने वाले छह गुण मान flex-start हैं (डिफ़ॉल्ट), flex-end , center , space-around , space-between और space-evenly .
फ्लेक्स-स्टार्ट:
फ्लेक्स-एंड:
केंद्र:
स्पेस-अराउंड:
अंतरिक्ष-बीच:
अंतरिक्ष-समान रूप से:
आइटम संरेखित करें
align-items . के बीच सबसे बड़ा अंतर और justify-content , अक्ष के अलावा यह बाल कंटेनरों को वितरित करता है, इसका डिफ़ॉल्ट मान है। एक अनुस्मारक के रूप में, जब हम flex-direction . का उपयोग करते हैं justify-content . के लिए डिफ़ॉल्ट मान है flex-start . align-items . के लिए ऐसा नहीं है . इसके बजाय, डिफ़ॉल्ट मान खिंचाव है।
उदाहरण के लिए, पृष्ठ के शीर्ष पर कोड संपादक पर वापस जाएं और .child-container पर चौड़ाई और ऊंचाई निकालें। . हमारे पास पहले से ही display: flex . है और flex-direction समूह। आइए flex-direction: row . के बीच टॉगल करें और flex-direction: column यह देखने के लिए कि कंटेनर बिना किसी बाधा के कैसे व्यवहार करता है। आप जो अपेक्षा करते हैं उसकी तुलना कैसे करता है?
बिना align-items के साथ नियम सेट, चाइल्ड कंटेनर क्रॉस एक्सिस पर पैरेंट कंटेनर के आकार तक फैला हुआ है। हालांकि, अगर हम align-items . सेट करते हैं पैरेंट कंटेनर पर संपत्ति, चाइल्ड कंटेनर का आकार स्वचालित रूप से सामग्री के आकार के साथ-साथ उस पर आपके पास जो भी पैडिंग और बॉर्डर है, समायोजित हो जाएगा।
अलाइन-आइटम:स्ट्रेच
अलाइन-आइटम:केंद्र
अन्य सभी गुण जो हमने justify-content . के लिए देखे थे यहां align-items पर भी लागू करें और इसका मतलब एक ही है, सिवाय इसके कि हमने अभी-अभी स्विच किया है कि हम किस धुरी पर हैं।
चाइल्ड कंटेनर (फ्लेक्स-आइटम) गुण
आदेश
आमतौर पर, मूल घटक में कंटेनरों का क्रम इस बात का पालन करेगा कि उन्हें HTML फ़ाइल में कैसे रखा गया है। हालांकि, यदि आप कंटेनरों के क्रम को नियंत्रित करना चाहते हैं – उदाहरण के लिए, यदि आप किसी अन्य चाइल्ड कंटेनर को पहले मोबाइल डिवाइस पर हाइलाइट करना चाहते हैं – आप ऑर्डर प्रॉपर्टी का उपयोग करके ऐसा कर सकते हैं। संपत्ति एक संख्यात्मक मान है जो इंगित करता है कि स्क्रीन पर प्रदर्शित होने पर बच्चे के कंटेनरों को किस क्रम में जाना चाहिए।
स्वयं को संरेखित करें
align-self डिफ़ॉल्ट संरेखण या align-items . द्वारा सेट की अनुमति देता है ओवरराइड किया जाना। याद रखें, align-self तभी काम करता है जब पैरेंट स्वयं display: flex . हो . align-self . के लिए मान flex-start हो सकता है , flex-end , आधार रेखा या खिंचाव।
निष्कर्ष
इस ट्यूटोरियल में, हमने फ्लेक्सिबल बॉक्स मॉडल की मूल बातें कवर की हैं। हमने पाया कि फ्लेक्सबॉक्स में पैरेंट कंटेनर और उसके चाइल्ड कंटेनर के बीच संबंध शामिल है। माता-पिता के फ्लेक्सबॉक्स गुण सीधे माता-पिता के खाली स्थान में बच्चे के कंटेनरों की आवाजाही को प्रभावित करते हैं।
हम flex-direction . का उपयोग करते हैं , justify-content , align-items और flex-wrap माता-पिता में बच्चे की स्थिति में हेरफेर करने के लिए और हम आदेश का उपयोग करते हैं और align-self माता-पिता पर लगाए गए कुछ डिफ़ॉल्ट या नियमों को ओवरराइड करने के लिए बच्चे पर।
कृपया इन गुणों के साथ खेलने के लिए यहां कोड संपादकों का उपयोग करें ताकि आप अभ्यास कर सकें। आप फ्लेक्सबॉक्स विशेषज्ञ बनने की राह पर हैं!