पूरा Flexbox गाइड

पूरा CSS फ्लेक्सबॉक्स ट्यूटोरियल। यह पूरा गाइड फ्लेक्सबॉक्स के बारे में सब कुछ बताता है, मूल तत्व (फ्लेक्स कंटेनर) और बाल तत्वों (फ्लेक्स तत्वों) के लिए सभी संभावित गुणों पर ध्यान केंद्रित करता है। इसमें इतिहास, डेमो, टेम्प्लेट और एक ब्राउज़र समर्थन चार्ट भी शामिल है।

माता-पिता (फ्लेक्स कंटेनर) के लिए गुण

प्रदर्शन

एक फ्लेक्स कंटेनर को परिभाषित करता है; निर्धारित मूल्य के आधार पर इनलाइन या ब्लॉक। सभी प्रथम स्तर के वंशजों के लिए फ्लेक्स संदर्भ को सक्षम करता है।

.container { display: flex; /* or inline-flex */ } 

ध्यान रखें:

ध्यान दें कि CSS कॉलम फ्लेक्स कंटेनर को प्रभावित नहीं करते हैं।

फ्लेक्स-दिशा

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

 .container { flex-direction: row | row-reverse | column | column-reverse; } 

• पंक्ति (डिफ़ॉल्ट): ltr में बाएं से दाएं; आरटीएल में दाएं से बाएं
• पंक्ति- दाएं से बाएं बाएं ltr ; आरटीएल में दाएं से बाएं
• स्तंभ : पंक्ति के समान लेकिन ऊपर से नीचे तक
• कॉलम-रिवर्स : एक ही चीज़, पंक्ति-रिवर्स लेकिन नीचे से ऊपर तक

फ्लेक्स-चादर

डिफ़ॉल्ट रूप से, फ्लेक्स आइटम एक लाइन पर फिट होने की कोशिश करेंगे। आप इसे बदल सकते हैं और इस प्रॉपर्टी के उपयोग से आवश्यकतानुसार वस्तुओं को एक नई लाइन पर जाने की अनुमति दे सकते हैं।

 .container{ flex-wrap: nowrap | wrap | wrap-reverse; } 

• Nowrap (डिफ़ॉल्ट): सभी फ्लेक्स आइटम एक ही लाइन पर होंगे
• रैप : फ्लेक्स आइटम ऊपर से नीचे तक कई लाइनें लपेटेंगे।
• रैप-रिवर्स : फ्लेक्स आइटम नीचे से ऊपर तक कई लाइनें लपेटेंगे ।

यहां फ्लेक्स-रैप व्यवहार के दृश्य डेमो देखें।

फ्लेक्स-फ्लो (लागू होता है: फ्लेक्स कंटेनर का मूल तत्व)

यह फ्लेक्स-दिशा और फ्लेक्स-रैप गुणों के लिए एक शॉर्टहैंड है जो एक साथ फ्लेक्स कंटेनर के मुख्य और अनुप्रस्थ कुल्हाड़ियों को परिभाषित करते हैं। डिफ़ॉल्ट मान पंक्ति Nowrap है ।

 flex-flow: <'flex-direction'> || <'flex-wrap'> 

दोनों ओर संरेखित-सामग्री

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

 .container { justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe; } 

• फ्लेक्स-स्टार्ट (डिफ़ॉल्ट): आइटम फ्लेक्स-दिशा दिशा की शुरुआत में स्थानांतरित हो जाते हैं।
• फ्लेक्स-एंड : आइटम को फ्लेक्स दिशा के अंत के करीब ले जाया जाता है।
• शुरू : तत्वों को लेखन-मोड दिशा की शुरुआत में स्थानांतरित कर दिया जाता है।
• अंत : लेखन-मोड दिशा के अंत में तत्वों को स्थानांतरित किया जाता है।
• बायां : तत्वों को कंटेनर के बाएं किनारे की ओर स्थानांतरित कर दिया जाता है, अगर यह समझ में नहीं आता है कि फ्लेक्स-दिशा है , तो यह शुरुआत की तरह व्यवहार करता है।
• सही : तत्वों को कंटेनर के दाहिने किनारे की ओर स्थानांतरित कर दिया जाता है, अगर यह समझ में नहीं आता है कि फ्लेक्स-दिशा है , तो यह शुरू की तरह व्यवहार करता है।
• केंद्र : तत्व लाइन के साथ केंद्रित होते हैं
• बीच-बीच में : तत्वों को समान रूप से लाइन के साथ वितरित किया जाता है; पहला तत्व लाइन की शुरुआत में है, आखिरी तत्व लाइन के अंत में है
• स्पेस-अराउंड : तत्वों को समान रूप से उनके चारों ओर समान स्थान के साथ लाइन में वितरित किया जाता है। ध्यान दें कि नेत्रहीन स्थान समान नहीं हैं, क्योंकि सभी तत्वों में दोनों तरफ समान स्थान है। पहले तत्व में कंटेनर के किनारे के विपरीत जगह की एक इकाई होगी, लेकिन अगले तत्व के बीच अंतरिक्ष की दो इकाइयाँ, क्योंकि अगले तत्व की अपनी रिक्ति है, जो लागू होती है।
• अंतरिक्ष-समान रूप से : तत्वों को वितरित किया जाता है ताकि किसी भी दो तत्वों (और किनारों की दूरी) के बीच की दूरी समान हो।

कृपया ध्यान दें कि इन मूल्यों के लिए ब्राउज़र समर्थन की अपनी बारीकियां हैं। उदाहरण के लिए, स्पेस-बीच को कभी भी एज सपोर्ट नहीं मिला है, और क्रोम में अभी तक स्टार्ट / एंड / लेफ्ट / राइट नहीं है। एमडीएन के विस्तृत रेखांकन हैं । सबसे सुरक्षित मान फ्लेक्स-स्टार्ट , फ्लेक्स-एंड और सेंटर हैं ।

दो अतिरिक्त कीवर्ड भी हैं जिन्हें आप इन मूल्यों के साथ जोड़ सकते हैं: सुरक्षित और असुरक्षित । सुरक्षित का उपयोग करना सुनिश्चित करता है कि आप इस प्रकार की स्थिति में कैसे भी शामिल हों, आप तत्व को स्थिति में नहीं रख सकते हैं ताकि वह ऑफ-स्क्रीन (उदाहरण के लिए, ऊपर से) प्रदर्शित हो ताकि सामग्री को या तो स्क्रॉल न किया जा सके (इसे "डेटा हानि" कहा जाता है) ।

संरेखित आइटम

यह गुण वर्तमान रेखा पर अनुप्रस्थ अक्ष के साथ फ्लेक्स आइटम कैसे स्थित हैं, के डिफ़ॉल्ट व्यवहार को निर्धारित करता है। इसे अनुप्रस्थ अक्ष (मुख्य अक्ष के लंबवत) के लिए एक औचित्य-सामग्री संस्करण के रूप में सोचें।

 .container { align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe; } 

• खिंचाव (डिफ़ॉल्ट): कंटेनर को भरने के लिए खिंचाव (न्यूनतम-चौड़ाई / अधिकतम-चौड़ाई अभी भी सम्मानित)
• फ्लेक्स-स्टार्ट / स्टार्ट / सेल्फ स्टार्ट : तत्वों को अनुप्रस्थ अक्ष की शुरुआत में रखा जाता है। उनके बीच का अंतर छोटा है और फ्लेक्स-दिशा नियमों या लेखन-मोड नियमों का पालन करना शामिल है।
• फ्लेक्स-एंड / एंड / आत्म-अंत : तत्व अनुप्रस्थ अक्ष के अंत में स्थित हैं। अंतर फिर से सूक्ष्म है और फ्लेक्स-दिशा या लेखन-मोड नियमों के अनुपालन में है।
• केंद्र : तत्व अनुप्रस्थ अक्ष पर केंद्रित होते हैं
• आधार रेखा : तत्वों को उनके आधार रेखा के अनुसार संरेखित किया जाता है

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

संरेखित-सामग्री

यह गुण फ्लेक्स कंटेनर के भीतर लाइनों को संरेखित करता है जब अनुप्रस्थ अक्ष पर अतिरिक्त स्थान होता है, जिस तरह जस्टिफ़-सामग्री मुख्य अक्ष के भीतर व्यक्तिगत तत्वों को संरेखित करती है।

नोट : यह संपत्ति तब लागू नहीं होती है जब फ्लेक्स आइटम की केवल एक पंक्ति होती है।

 .container { align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe; } 

• फ्लेक्स-स्टार्ट / स्टार्ट : आइटम कंटेनर की शुरुआत में स्थानांतरित हो गए। लेखन-मोड दिशा का उपयोग करते समय अधिक समर्थित फ्लेक्स-स्टार्ट फ्लेक्स-दिशा का उपयोग करता है।
• फ्लेक्स-एंड / एंड : कंटेनर के अंत में स्थानांतरित आइटम। अधिक समर्थित फ्लेक्स-एंड फ्लेक्स-दिशा का उपयोग करता है, जबकि एंड राइटिंग-मोड दिशा का उपयोग करता है।
• केंद्र : आइटम कंटेनर में केंद्रित हैं
• बीच-बीच में : तत्वों को समान रूप से वितरित किया जाता है; पहली पंक्ति कंटेनर की शुरुआत में है, और अंतिम अंत में है
• स्पेस-अराउंड : तत्वों को समान रूप से प्रत्येक पंक्ति के चारों ओर समान स्थान के साथ वितरित किया जाता है
• अंतरिक्ष-समान रूप से : तत्वों को समान रूप से वितरित किया जाता है, उनके आसपास एक ही स्थान
• खिंचाव (डिफ़ॉल्ट): शेष स्थान पर कब्जा करने के लिए लाइनें फैली हुई हैं

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

पहले बाल तत्वों (फ्लेक्स तत्वों) के लिए गुण

क्रम

डिफ़ॉल्ट रूप से, फ्लेक्स आइटम मूल क्रम में हैं। हालांकि, ऑर्डर प्रॉपर्टी उस ऑर्डर को नियंत्रित करती है जिसमें वे फ्लेक्स कंटेनर में दिखाई देते हैं।

 .item { order: <integer>; /* default is 0 */ } 

फ्लेक्स से विकसित

यदि आवश्यक हो तो यह गुण फ्लेक्स तत्व की क्षमता को निर्धारित करता है। यह शून्य से मूल्य लेता है, जो एक अनुपात के रूप में कार्य करता है। यह गुण है कि एक लचीले कंटेनर के अंदर एक तत्व को कितनी जगह मिलनी चाहिए।

यदि सभी फ्लेक्स-ग्रोइंग तत्वों को 1 पर सेट किया जाता है, तो कंटेनर में शेष स्थान सभी बाल तत्वों के बीच समान रूप से वितरित किया जाएगा। यदि किसी एक बच्चे का मूल्य 2 है, तो यह तत्व बाकी की तुलना में दोगुना स्थान लेगा (या कम से कम प्रयास करें)।

 .item { flex-grow: <number>; /* default 0 */ } 

ऋणात्मक संख्याएँ समर्थित नहीं हैं।

फ्लेक्स-छोटा

यह गुण यदि आवश्यक हो तो लचीले सदस्य को अनुबंध करने की क्षमता निर्धारित करता है।

 .item { flex-shrink: <number>; /* default 1 */ } 

ऋणात्मक संख्याएँ समर्थित नहीं हैं।

फ्लेक्स-आधार

यह गुण शेष स्थान को आवंटित करने से पहले डिफ़ॉल्ट तत्व आकार को निर्धारित करता है। यह एक लंबाई (उदाहरण के लिए, 20%, 5%, आदि) या एक कीवर्ड हो सकता है। ऑटो कीवर्ड का अर्थ है "मेरी चौड़ाई या ऊंचाई की संपत्ति को देखें"। सामग्री कीवर्ड का अर्थ है "तत्व की सामग्री के आधार पर आकार" - यह कीवर्ड अभी भी बहुत अच्छी तरह से समर्थित नहीं है, इसलिए यह सत्यापित करना कठिन है कि यह अधिकतम सामग्री , मिनट-सामग्री या फिट-सामग्री का उपयोग करता है ।

 .item { flex-basis: <length> | auto; /* default auto */ } 

यदि 0 पर सेट किया गया है, तो सामग्री के आसपास के अतिरिक्त स्थान को ध्यान में नहीं रखा जाता है। यदि ऑटो पर सेट किया जाता है, तो इसके फ्लेक्स-ग्रो वैल्यू के आधार पर अतिरिक्त स्थान आवंटित किया जाता है।

फ्लेक्स

यह फ्लेक्स-ग्रो , फ्लेक्स-हटना और फ्लेक्स-बेस का एक साथ उपयोग करने के लिए एक शॉर्टहैंड है। दूसरा और तीसरा पैरामीटर ( फ्लेक्स-हटना और फ्लेक्स-बेस ) वैकल्पिक हैं। डिफ़ॉल्ट रूप से यह 0 1 ऑटो है ।

 .item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] } 

यह अनुशंसा की जाती है कि आप व्यक्तिगत गुणों को स्थापित करने के बजाय इस आशुलिपि संपत्ति का उपयोग करें । यह कमी यथोचित अन्य अर्थ निर्धारित करती है।

संरेखित आत्म

यह संपत्ति आपको व्यक्तिगत फ्लेक्स आइटम के लिए डिफ़ॉल्ट संरेखण (या संरेखित-आइटम का उपयोग करके निर्दिष्ट) को ओवरराइड करने की अनुमति देती है।
उपलब्ध मूल्यों को समझने के लिए कृपया संरेखित-आइटम गुण देखें।

 .item { align-self: auto | flex-start | flex-end | center | baseline | stretch; } 

ध्यान दें कि फ़्लोट , स्पष्ट और ऊर्ध्वाधर-संरेखित गुण फ्लेक्स तत्वों को प्रभावित नहीं करते हैं।

उदाहरण

चलो एक बहुत ही सरल उदाहरण के साथ शुरू करते हैं जो लगभग एक दैनिक समस्या हल करता है: पूर्ण केंद्रित। इस कार्य के लिए सबसे आसान समाधान फ्लेक्सबॉक्स का उपयोग करना है।

 .parent { display: flex; height: 300px; /*    */ } .child { width: 100px; /*    */ height: 100px; /*    */ margin: auto; /* ! */ } 

यह इस तथ्य के कारण है कि फ्लेक्स कंटेनर में ऑटो के लिए खड़ी ऊर्ध्वाधर संरेखण मार्जिन संपत्ति अतिरिक्त स्थान को अवशोषित करती है। इस प्रकार, ऑटो में मार्जिन सेट करने से ऑब्जेक्ट पूरी तरह से दोनों अक्षों पर केंद्रित हो जाएगा।

अब कुछ और गुणों का उपयोग करते हैं। 6 तत्वों की एक सूची पर विचार करें, सभी निश्चित आकारों के साथ, लेकिन ऑटो आकार हो सकते हैं। हम चाहते हैं कि उन्हें समान रूप से क्षैतिज अक्ष के साथ वितरित किया जाए, ताकि ब्राउज़र का आकार बदलते समय सब कुछ अच्छी तरह से और मीडिया के प्रश्नों के बिना हो सके।

 .flex-container { /*    flex  */ display: flex; /*    flex-direction        * ,       : * flex-direction: row; * flex-wrap: wrap; */ flex-flow: row wrap; /*   ,     */ justify-content: space-around; } 

हो गया। बाकी सब सिर्फ स्टाइल है।



यदि आप स्क्रीन रिज़ॉल्यूशन या स्केल बदलते हैं, तो यह इस तरह होगा:



चलो कुछ और कोशिश करते हैं। कल्पना करें कि हमारे पास हमारी वेबसाइट के शीर्ष पर राइट-नेविगेशन नेविगेशन तत्व हैं, लेकिन हम चाहते हैं कि उन्हें मध्यम आकार की स्क्रीन पर चौड़ाई में संरेखित किया जाए और छोटे उपकरणों पर एक कॉलम में व्यवस्थित किया जाए। यह काफी सरल है।

 /*   */ .navigation { display: flex; flex-flow: row wrap; /*           */ justify-content: flex-end; } /*   */ @media all and (max-width: 800px) { .navigation { /*       ,       */ justify-content: space-around; } } /*   */ @media all and (max-width: 500px) { .navigation { /*         ,    */ flex-direction: column; } } 

आइए फ्लेक्स आइटम के लचीलेपन के साथ खेलकर कुछ बेहतर प्रयास करें! हेडर और फुटर के साथ 3-कॉलम पूर्ण-पृष्ठ लेआउट के बारे में कैसे। और यह तत्वों के प्रारंभिक क्रम पर निर्भर नहीं करता है।

 .wrapper { display: flex; flex-flow: row wrap; } /*  ,      100%,  flex-base */ .wrapper > * { flex: 1 100%; } /*         * 1. header * 2. article * 3. aside 1 * 4. aside 2 * 5. footer */ /*   */ @media all and (min-width: 600px) { /*          */ .aside { flex: 1 auto; } } /*   */ @media all and (min-width: 800px) { /*            ,      ,      */ .main { flex: 2 0px; } .aside-1 { order: 1; } .main { order: 2; } .aside-2 { order: 3; } .footer { order: 4; } } 

ब्राउज़र का समर्थन

Flexbox के "संस्करण" से टूट गया:

• (नया) का अर्थ है विनिर्देशन से हालिया वाक्य-विन्यास (जैसे प्रदर्शन: फ्लेक्स; )
• (टर्नर) का अर्थ है 2011 के बाद से अजीब अनौपचारिक वाक्यविन्यास (जैसे प्रदर्शन: फ्लेक्सबॉक्स; )
• (पुराना) का अर्थ है 2009 के बाद से पुराना वाक्यविन्यास (उदा। प्रदर्शन: बॉक्स; )

ब्लैकबेरी ब्राउज़र 10+ नए सिंटैक्स का समर्थन करता है।

बेहतर ब्राउज़र समर्थन पाने के लिए सिंटैक्स को कैसे मिलाया जाए, इस बारे में अधिक जानकारी के लिए, कृपया इस लेख (CSS ट्रिक्स) या इस लेख (DevOpera) को देखें ।