flexboxफ्लेक्सबॉक्स के साथ शुरुआत करना


टिप्पणियों

यह खंड फ्लेक्सबॉक्स क्या है का एक सिंहावलोकन प्रदान करता है, और क्यों एक डेवलपर इसका उपयोग करना चाह सकता है।

इसमें फ्लेक्सबॉक्स के भीतर किसी बड़े विषय का भी उल्लेख होना चाहिए, और संबंधित विषयों के लिए लिंक करना चाहिए। चूंकि फ्लेक्सबॉक्स के लिए दस्तावेज़ीकरण नया है, इसलिए आपको उन संबंधित विषयों के प्रारंभिक संस्करण बनाने की आवश्यकता हो सकती है।

संस्करण

Flexbox कंटेनर और आइटम

फ्लेक्सबॉक्स या फ्लेक्सिबल बॉक्स एक पृष्ठ पर सामग्री की व्यवस्था करने के लिए एक पूर्वानुमान विधि है। फ्लेक्सबॉक्स पारंपरिक ब्लॉक मॉडल पोजिशनिंग पर एक सुधार प्रदान करता है जिसमें पेज पर सामग्री के लिए पटल की तरह फ्लोटिंग या टेबल का उपयोग किया जाता है।

इसके मूल में, Flexbox को मूल तत्व (फ्लेक्स कंटेनर) और एक बाल तत्व (फ्लेक्स आइटम) में विभाजित किया जा सकता है।

फ्लेक्स कंटेनर

एक फ्लेक्स कंटेनर को फ्लेक्स में अपनी डिस्प्ले प्रॉपर्टी सेट करके बनाया जा सकता है:

.container {
  display: flex;
}
 

फ्लेक्स आइटम

एक फ्लेक्स कंटेनर का प्रत्येक बाल तत्व एक फ्लेक्स आइटम बन जाता है। इन फ्लेक्स आइटम को तब अतिरिक्त गुण प्राप्त हो सकते हैं, जो पृष्ठ पर स्थित हैं।

.item {
  flex: 1;
}
 

यह flex: 1 प्रॉपर्टी flex-grow: 1 लिए शॉर्टहैंड flex-grow: 1 यह कंटेनर के भीतर अपने भाई-बहनों के सापेक्ष बढ़ने में सक्षम है।

इन्हें एक साथ रखना HTML मार्कअप है:

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
 

फ्लेक्सबॉक्स परिचय

CSS3 में पेश किया गया Flexbox (फ्लेक्सिबल बॉक्स) लेआउट एक कंटेनर तत्व ( flex container ) के भीतर बच्चों के तत्वों ( flex items ) के बीच स्थान को बाहर करने, संरेखित करने और वितरित करने के लिए एक अधिक कुशल तरीका प्रदान करता है। सबसे महत्वपूर्ण बात यह है कि जब उनके आकार अज्ञात या गतिशील होते हैं और इसलिए "फ्लेक्स" या "लचीला" शब्द होता है।

आइए मूल बातों से शुरू करें और देखें कि फ्लेक्स के रूप में एक कंटेनर को कैसे आरंभ किया जा सकता है।

निम्नलिखित मार्कअप पर विचार करें:

<div class="flex-container">
  <div class="flex-item-1"></div>
  <div class="flex-item-2"></div>
  <div class="flex-item-3"></div>
</div>
 

एक फ्लेक्सबॉक्स को केवल display: flex का उपयोग करके आरंभीकृत किया जाता है display: flex । किया हुआ!

.flex-container {
  height: 100px;
  padding: 10px;
  background: grey;

  display: flex; // or display: inline-flex;
}
 

अब फ्लेक्स कंटेनर तैयार है, आइए हम इसके फ्लेक्स आइटम के साथ खेलते हैं जो उन्हें प्रत्येक 25% की चौड़ाई देते हैं और क्षैतिज रूप से केंद्र को उनके माता-पिता कंटेनर के अंदर फ्लेक्स आइटम संरेखित करते हैं।

.flex-item-1 {
  width: 25%;
  background: green;
}

.flex-item-2 {
  width: 25%;
  background: purple;
}

.flex-item-3 {
  width: 25%;
  background: pink;
}
 

कृपया ध्यान दें, मैंने जानबूझकर 3 बच्चों को प्रत्येक 25% की चौड़ाई दी है, यह दिखाने के लिए कि फ्लेक्सबॉक्स के भीतर बच्चों के चारों ओर घूमना कितना आसान है।

अब जब हम उपरोक्त कोड चलाते हैं, तो हमें कंटेनर के भीतर 3 बच्चों को क्षैतिज रूप से एक-दूसरे के बगल में देखना चाहिए। ऐसा इसलिए है क्योंकि डिफ़ॉल्ट रूप से, एक फ्लेक्सबॉक्स में संपत्ति flex-direction: row । डिफ़ॉल्ट रूप से फ्लेक्स आइटम को एक दूसरे के बगल में क्षैतिज रूप से संरेखित किया जाएगा। इसके अलावा दाईं ओर एक अंतर होना चाहिए क्योंकि बच्चों की कुल चौड़ाई 100% तक नहीं थी।

अब संपत्ति को justify-content: center जोड़ने का प्रयास करें justify-content: center flex-container justify-content: center

.flex-container {
  ...
  justify-content: center;
}
 

इसका परिणाम यह होगा कि बच्चों को क्षैतिज रूप से केंद्र में रखा जाएगा। उसी संपत्ति में अन्य मूल्य होते हैं जैसे कि flex-end (दाएं से संरेखित), space-around (वस्तुओं के चारों ओर समान स्थान), space-between (वस्तुओं के बीच बराबर स्थान)।

महत्वपूर्ण: अन्य ब्लॉक तत्व गुण जैसे text-align: center आदि का फ्लेक्स तत्व पर कोई प्रभाव नहीं पड़ता है।

स्थापना या सेटअप

Flexbox एक CSS3 मॉड्यूल है, जिसे वर्ल्ड वाइड वेब कंसोर्टियम द्वारा मानकीकृत किया गया है। यह तत्व व्यवस्था के लिए एक लेआउट मोड है जैसे कि पृष्ठ लेआउट के अलग-अलग प्रदर्शन आकारों को समायोजित करने के दौरान तत्व अनुमानित रूप से व्यवहार करते हैं।

क्योंकि यह CSS3 का एक हिस्सा है, आपको कुछ भी स्थापित करने की आवश्यकता नहीं है। इसका उपयोग तब तक किया जा सकता है जब तक ब्राउज़र इसका समर्थन करता है, और अधिकांश आधुनिक ब्राउज़र करते हैं। यह देखने के लिए कि आपका ब्राउज़र इसका समर्थन करता है या नहीं, यहां संगतता चार्ट है

अपने CSS में flexbox को सेट और उपयोग करने के लिए, बस display: flex जोड़ें display: flex को selector।