फ्लेक्सबॉक्स का व्यावहारिक अनुप्रयोग। फ्लेक्सबॉक्स एलिमेंट पोजिशनिंग विधि सीएसएस फ्लेक्स क्या हैं

हेलो हबर!

एक बढ़िया शाम, बिना किसी दिलचस्प बात का पूर्वाभास किए, हमारी बातचीत को एक प्रकाशन के लेखक से एक प्रस्ताव मिला, जिसे उन्होंने 2012 के वसंत में लिखा था, एक रीमेक लेख लिखने के लिए, लेकिन फ्लेक्सबॉक्स का उपयोग करते हुए और यह क्या और कैसे काम करता है, इसकी एक व्याख्या के साथ। कुछ शंकाओं के बाद, विशिष्टताओं को गहराई से समझने की रुचि फिर भी बनी रही और मैं खुशी-खुशी उन्हीं उदाहरणों को टाइप करने के लिए बैठ गया। जैसे-जैसे हम इस क्षेत्र में डूबे, कई बारीकियाँ स्पष्ट होने लगीं, जो लेआउट को फिर से डिज़ाइन करने से कहीं अधिक हो गईं। सामान्य तौर पर, इस लेख में मैं "सीएसएस फ्लेक्सिबल बॉक्स लेआउट मॉड्यूल" नामक एक ऐसे अद्भुत विनिर्देश के बारे में बात करना चाहता हूं और इसकी कुछ दिलचस्प विशेषताएं और एप्लिकेशन के उदाहरण दिखाना चाहता हूं। मैं उन सभी को आमंत्रित करता हूं जो हैक में शामिल होने के इच्छुक हैं।

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

तकनीकी हिस्सा

किसी भी उदाहरण पर आगे बढ़ने से पहले, यह समझना सार्थक है कि इस विनिर्देश में कौन से गुण शामिल हैं और वे कैसे काम करते हैं। चूँकि उनमें से कुछ शुरू में बहुत स्पष्ट नहीं हैं, और कुछ मिथकों से घिरे हुए हैं जिनका वास्तविकता से कोई लेना-देना नहीं है।

इसलिए। फ्लेक्सबॉक्स में दो मुख्य प्रकार के तत्व हैं: फ्लेक्स कंटेनर और उसके बच्चे - फ्लेक्स आइटम। कंटेनर को प्रारंभ करने के लिए, बस सीएसएस के माध्यम से तत्व को असाइन करें प्रदर्शन: फ्लेक्स;या प्रदर्शन: इनलाइन-फ्लेक्स;. फ्लेक्स और इनलाइन-फ्लेक्स के बीच अंतर केवल कंटेनर के आसपास के तत्वों के साथ बातचीत के सिद्धांत में है, डिस्प्ले के समान: ब्लॉक; और डिस्प्ले: इनलाइन-ब्लॉक;, क्रमशः।

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

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

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

सुविधा के लिए, एक अतिरिक्त संपत्ति है फ्लेक्स-प्रवाह, जिसमें आप एक साथ निर्दिष्ट कर सकते हैं फ्लेक्स-दिशाऔर फ्लेक्स-रैप. यह इस तरह दिख रहा है: फ्लेक्स-फ्लो:

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

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

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

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

मुख्य गुणों में से एक है फ्लेक्स-आधार. इस संपत्ति के साथ हम एक फ्लेक्स तत्व की आधार चौड़ाई निर्दिष्ट कर सकते हैं। डिफ़ॉल्ट मान है ऑटो. इस संपत्ति का गहरा संबंध है फ्लेक्स-ग्रोऔर फ्लेक्स-सिकुड़ना, जिसके बारे में मैं थोड़ी देर बाद बात करूंगा। px, %, em और अन्य इकाइयों में चौड़ाई मान स्वीकार करता है। मूलतः यह फ्लेक्स तत्व की चौड़ाई नहीं है, यह एक प्रारंभिक बिंदु की तरह है। जिसके सापेक्ष तत्व खिंचता या सिकुड़ता है। ऑटो मोड में, तत्व को उसके अंदर की सामग्री के सापेक्ष आधार चौड़ाई मिलती है।

फ्लेक्स-ग्रोकई संसाधनों पर इसका पूरी तरह से गलत वर्णन है। इसमें कहा गया है कि यह कथित तौर पर कंटेनर में तत्वों के आकार का अनुपात निर्धारित करता है। वास्तव में यह सच नहीं है। कंटेनर में खाली जगह होने पर यह गुण तत्व के विस्तार कारक को निर्दिष्ट करता है। डिफ़ॉल्ट रूप से, इस प्रॉपर्टी का मान 0 है। आइए कल्पना करें कि हमारे पास एक फ्लेक्स कंटेनर है जिसकी चौड़ाई 500px है, इसके अंदर दो फ्लेक्स आइटम हैं, प्रत्येक की आधार चौड़ाई 100px है। इससे कंटेनर में 300px अतिरिक्त खाली जगह बचती है। यदि हम पहले तत्व के लिए flex-grow: 2; और दूसरे तत्व के लिए flex-grow: 1; निर्दिष्ट करते हैं। परिणामस्वरूप, ये ब्लॉक कंटेनर की पूरी उपलब्ध चौड़ाई ले लेंगे, केवल पहले ब्लॉक की चौड़ाई 300px होगी, और दूसरे की केवल 200px होगी। क्या हुआ? हुआ यह कि कंटेनर में उपलब्ध 300px खाली स्थान को तत्वों के बीच 2:1 अनुपात में वितरित किया गया, पहले के लिए +200px और दूसरे के लिए +100px। वास्तव में यह इसी तरह काम करता है।

यहां हम आसानी से एक और समान संपत्ति की ओर बढ़ते हैं, अर्थात् फ्लेक्स-सिकुड़ना. डिफ़ॉल्ट मान 1 है। यह तत्वों की चौड़ाई बदलने के लिए एक कारक भी निर्धारित करता है, केवल विपरीत दिशा में। यदि कंटेनर की चौड़ाई है कमतत्वों की मूल चौड़ाई के योग से, तब यह गुण प्रभाव में आता है। उदाहरण के लिए, कंटेनर की चौड़ाई 600px है, और तत्वों का फ्लेक्स-आधार 300px है। पहला तत्व फ्लेक्स-श्रिंक: 2;, और दूसरा तत्व फ्लेक्स-श्रिंक: 1; दें। अब कंटेनर को 300px तक छोटा करते हैं। इसलिए, तत्वों की चौड़ाई का योग कंटेनर से 300px अधिक है। यह अंतर 2:1 अनुपात में वितरित किया जाता है, इसलिए हम पहले ब्लॉक से 200px और दूसरे से 100px घटाते हैं। पहले और दूसरे तत्व के लिए तत्वों का नया आकार क्रमशः 100px और 200px है। यदि हम फ्लेक्स-श्रिंक को 0 पर सेट करते हैं, तो हम तत्व को उसकी आधार चौड़ाई से छोटे आकार में सिकुड़ने से रोकते हैं।

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

अभिव्यक्ति का उपयोग करके सभी तीन गुणों को संक्षिप्त रूप में लिखा जा सकता है मोड़ना. यह इस प्रकार दिखता है:
मोड़ना: ;
और हम दो और संक्षिप्त संस्करण भी लिख सकते हैं, फ्लेक्स:ऑटो;और फ्लेक्स: कोई नहीं;, मतलब फ्लेक्स: 1 1 ऑटो;और फ्लेक्स: 0 0 ऑटो;क्रमश।

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

बस, मैं इससे थक गया हूँ! हमें उदाहरण दीजिए!

हमने तकनीकी भाग को सुलझा लिया, यह काफी लंबा निकला, लेकिन आपको इसमें शामिल होने की जरूरत है। अब हम व्यावहारिक अनुप्रयोग की ओर आगे बढ़ सकते हैं।
उन "पांच वास्तव में उपयोगी उत्तरदायी लेआउट टेम्पलेट्स" के विकास के दौरान, हमें उन विशिष्ट स्थितियों को हल करना था जिनका डेवलपर्स अक्सर सामना करते हैं। फ्लेक्सबॉक्स के साथ, इन समाधानों को लागू करना आसान और अधिक लचीला हो जाता है।
आइए वही चौथा लेआउट लें, क्योंकि... इसमें सबसे दिलचस्प तत्व हैं।

सबसे पहले, आइए पृष्ठ की मुख्य चौड़ाई निर्दिष्ट करें, इसे केंद्र में संरेखित करें, और पाद लेख को पृष्ठ के निचले भाग पर दबाएँ। सामान्य तौर पर हमेशा की तरह.

एचटीएमएल (पृष्ठभूमि: # सीसीसी; न्यूनतम-ऊंचाई: 100%; फ़ॉन्ट-परिवार: सैन्स-सेरिफ़; डिस्प्ले: -वेबकिट-फ्लेक्स; डिस्प्ले: फ्लेक्स; फ्लेक्स-दिशा: कॉलम;) बॉडी (मार्जिन: 0; पैडिंग: 0 15पीएक्स ; डिस्प्ले: -वेबकिट-फ्लेक्स; डिस्प्ले: फ्लेक्स-डायरेक्शन: फ्लेक्स: ऑटो; डिस्प्ले: -वेबकिट-फ्लेक्स: रैप; : 960px; न्यूनतम-चौड़ाई: 430px; मार्जिन: ऑटो; बॉर्डर-बॉक्स; रंग: #eee;

इस तथ्य के कारण कि हमने .main के लिए flex-grow: 1 निर्दिष्ट किया है; यह पूरी उपलब्ध ऊँचाई तक फैला होता है, जिससे फ़ुटर नीचे की ओर दब जाता है। इस समाधान में बोनस यह है कि पाद लेख गैर-निश्चित ऊंचाई का हो सकता है।

अब लोगो और मेनू को हेडर में रखते हैं।
.लोगो (फ़ॉन्ट-आकार: 0; मार्जिन: -10px 10px 10px 0; डिस्प्ले: फ्लेक्स; फ्लेक्स: कोई नहीं; संरेखित-आइटम: केंद्र; ) .लोगो: पहले, .लोगो: बाद (सामग्री: ""; डिस्प्ले: ब्लॉक ); : 30px; ) .nav (मार्जिन: -5px 0 0 -5px; डिस्प्ले: -वेबकिट-फ्लेक्स; डिस्प्ले: फ्लेक्स; फ्लेक्स-रैप: रैप; ) .nav-itm (बैकग्राउंड: #222; चौड़ाई: 130px; ऊंचाई: 50px; फ़ॉन्ट-आकार: 1.5rem; पाठ-सजावट: कोई नहीं; प्रदर्शन: -वेबकिट-सामग्री: केंद्र;

चूंकि हेडर में flex-wrap:rap; और औचित्य-सामग्री: स्थान-बीच; लोगो और मेनू हेडर के विभिन्न किनारों पर बिखरे हुए हैं, और यदि मेनू के लिए पर्याप्त जगह नहीं है, तो यह सुरुचिपूर्ण ढंग से लोगो के नीचे चला जाएगा।

आगे हम एक बड़ा पोस्ट या बैनर देखते हैं, यह कहना मुश्किल है कि यह विशेष रूप से क्या है, लेकिन बात यह नहीं है। हमारे पास दाईं ओर एक छवि है और बाईं ओर शीर्षक वाला पाठ है। मैं व्यक्तिगत रूप से इस विचार का पालन करता हूं कि कोई भी तत्व यथासंभव लचीला होना चाहिए, भले ही लेआउट अनुकूली या स्थिर हो। तो इस पोस्ट में हमारे पास एक साइडबार है जिसमें एक तस्वीर रखी गई है; सख्ती से कहें तो, हम बिल्कुल नहीं कह सकते कि हमें कितनी चौड़ाई चाहिए, क्योंकि आज हमारे पास एक बड़ी तस्वीर है, कल एक छोटी तस्वीर है, और हम तत्व को दोबारा नहीं बनाना चाहते हैं। हर बार शुरू से. इसका मतलब यह है कि हमें साइडबार को वह स्थान लेने की आवश्यकता है जिसकी उसे आवश्यकता है, और शेष स्थान सामग्री में चला जाएगा। आओ इसे करें:

बॉक्स (फ़ॉन्ट-आकार: 1.25rem; लाइन-ऊंचाई: 1.5; फ़ॉन्ट-शैली: इटैलिक; मार्जिन: 0 0 40px -50px; डिस्प्ले: -वेबकिट-फ्लेक्स; डिस्प्ले: फ्लेक्स; फ्लेक्स-रैप: रैप; जस्टिफाई-कंटेंट: मध्य; ऑटो)

जैसा कि आप .बॉक्स-बेस के लिए देख सकते हैं, जहां हमारे पास शीर्षक और टेक्स्ट है, मैंने आधार चौड़ाई निर्दिष्ट की है फ्लेक्स-आधार: 430px;, और ब्लॉक सिकुड़न का उपयोग करने पर भी प्रतिबंध लगाया फ्लेक्स-सिकुड़ना: 0;. इस हेरफेर से हमने कहा कि सामग्री 430px से कम चौड़ी नहीं हो सकती। और इस तथ्य को ध्यान में रखते हुए कि मैं .बॉक्स का संकेत देता हूं फ्लेक्स-रैप: रैप;जिस क्षण साइडबार और सामग्री कंटेनर.बॉक्स में फिट नहीं होंगे, साइडबार स्वचालित रूप से सामग्री के अंतर्गत आ जाएगा। और यह सब बिना आवेदन के @मीडिया! मुझे लगता है ये वाकई बहुत अच्छा है.

हमारे पास तीन-स्तंभ की सामग्री बची है। इस समस्या के कई समाधान हैं, मैं उनमें से एक दिखाऊंगा, अन्य लेआउट में एक और विकल्प है।
आइए एक कंटेनर बनाएं, इसे .content नाम दें और इसे कॉन्फ़िगर करें।
.सामग्री (मार्जिन-बॉटम: 30px; डिस्प्ले: -वेबकिट-फ्लेक्स; डिस्प्ले: फ्लेक्स; फ्लेक्स-रैप: रैप;)

कंटेनर में तीन कॉलम हैं, .बैनर, .पोस्ट, .टिप्पणियाँ
.बैनर (फ्लेक्स: 1 1 200px; ) .पोस्ट (मार्जिन: 0 0 30px 30px; फ्लेक्स: 1 1 200px; ) .टिप्पणियाँ (मार्जिन: 0 0 30px 30px; फ्लेक्स: 1 1 200px; )

मैंने स्तंभों को 200px की आधार चौड़ाई दी ताकि स्तंभ बहुत अधिक संकीर्ण न हों, लेकिन यह बेहतर होगा यदि उन्हें आवश्यकतानुसार एक-दूसरे के नीचे ले जाया जाए।

लेआउट के अनुसार, हम सामग्री के साथ @मीडिया के बिना काम नहीं कर पाएंगे, तो आइए चौड़ाई के लिए कॉलम के व्यवहार को थोड़ा और समायोजित करें<800px и <600px.
@मीडिया स्क्रीन और (अधिकतम-चौड़ाई: 800px) ( .बैनर (मार्जिन-बाएं: -30px; डिस्प्ले: -वेबकिट-फ्लेक्स; डिस्प्ले: फ्लेक्स; फ्लेक्स-आधार: 100%; ) .पोस्ट (मार्जिन-बाएं: 0; ) ) @मीडिया स्क्रीन और (अधिकतम-चौड़ाई: 600px) ( .सामग्री (डिस्प्ले: ब्लॉक; ) .बैनर (मार्जिन: 0; डिस्प्ले: ब्लॉक; ) .टिप्पणियाँ (मार्जिन: 0; ) )

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

हम देखते हैं कि कैसे डेस्कटॉप रिज़ॉल्यूशन पर पोस्ट एक पंक्ति में तीन के ग्रिड में बनाई जाती हैं। जब व्यूपोर्ट की चौड़ाई 800px से कम हो जाती है, तो ग्रिड पोस्ट वाले कॉलम में बदल जाता है, जहां पोस्ट फोटो को पोस्ट सामग्री के बाईं और दाईं ओर बारी-बारी से पंक्तिबद्ध किया जाता है। और यदि चौड़ाई 600px से कम है, तो पोस्ट फ़ोटो पूरी तरह से छिपी हुई है।
.ग्रिड (डिस्प्ले: -वेबकिट-फ्लेक्स; डिस्प्ले: फ्लेक्स; फ्लेक्स-रैप: रैप; जस्टिफाई-कंटेंट: स्पेस-बीच; ) .ग्रिड-आईटीएम (मार्जिन-बॉटम: 30पीएक्स; फ्लेक्स-बेस: कैल्क(33.33% - 30पीएक्स) * 2/3); 100%; ग्रिड-आईएमजी (फ्लेक्स: 0 0 ऑटो; ) .ग्रिड-आईटीएम:एनथ-चाइल्ड(सम) .ग्रिड-आईएमजी (मार्जिन: 0 0 0 30पीएक्स; ऑर्डर: 2; ) .ग्रिड-आईटीएम:एनथ-चाइल्ड (विषम) .ग्रिड-आईएमजी (मार्जिन: 0 30पीएक्स 0 0; ) .ग्रिड-कंट (फ्लेक्स: 1 1 ऑटो; ) .ग्रिड-शीर्षक (टेक्स्ट-एलाइन: लेफ्ट; ) ) @मीडिया स्क्रीन और (अधिकतम-चौड़ाई: 600px) ( .grid-img (प्रदर्शन: कोई नहीं; ) )

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

सीएसएस में लेआउट बनाते समय फ्लेक्सबॉक्स को समस्याओं की एक विशाल श्रृंखला को हल करने का एक सफल प्रयास कहा जा सकता है। लेकिन इससे पहले कि हम इसके विवरण पर आगे बढ़ें, आइए जानें कि अब हम जिन लेआउट विधियों का उपयोग करते हैं उनमें क्या गलत है?

कोई भी लेआउट डिज़ाइनर किसी चीज़ को लंबवत रूप से संरेखित करने या रबरयुक्त मध्य कॉलम के साथ 3-कॉलम लेआउट बनाने के कई तरीके जानता है। लेकिन आइए मान लें कि ये सभी विधियां काफी अजीब हैं, हैक की तरह दिखती हैं, सभी मामलों में उपयुक्त नहीं हैं, समझना मुश्किल है और ऐतिहासिक रूप से विकसित हुई कुछ जादुई स्थितियां पूरी नहीं होने पर काम नहीं करती हैं।

ऐसा इसलिए हुआ क्योंकि html और css का क्रमिक विकास हुआ। शुरुआत में, वेब पेज एकल-थ्रेडेड टेक्स्ट दस्तावेज़ों की तरह दिखते थे, थोड़ी देर बाद, पेज को ब्लॉकों में तोड़ना तालिकाओं के साथ किया जाने लगा, फिर फ़्लोट के साथ लेआउट करना फैशनेबल हो गया, और ie6 की आधिकारिक मृत्यु के बाद, इनलाइन-ब्लॉक तकनीकें सामने आईं भी जोड़ा गया. परिणामस्वरूप, हमें इन सभी तकनीकों का एक विस्फोटक मिश्रण विरासत में मिला, जिसका उपयोग सभी मौजूदा वेब पेजों के 99.9% के लिए लेआउट बनाने के लिए किया गया था।

एक फ्लेक्स कंटेनर के अंदर ब्लॉकों का बहु-पंक्ति संगठन।

फ्लेक्स-रैप

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

उपलब्ध मान फ्लेक्स-रैप:

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

फ्लेक्स-फ्लो फ्लेक्स-दिशा + फ्लेक्स-रैप के लिए एक सुविधाजनक शॉर्टहैंड है

संक्षेप में, फ्लेक्स-फ्लो एक संपत्ति में मुख्य और बहु-रेखा अनुप्रस्थ अक्ष की दिशा का वर्णन करने की क्षमता प्रदान करता है। डिफ़ॉल्ट फ्लेक्स-फ्लो: पंक्ति अब्रैप।

फ्लेक्स-फ्लो:<‘flex-direction’> || <‘flex-wrap’>

सीएसएस

/* अर्थात। ... */ .माय-फ्लेक्स-ब्लॉक(फ्लेक्स-डायरेक्शन:कॉलम; फ्लेक्स-रैप: रैप; ) /*यह वैसा ही है... */ .माय-फ्लेक्स-ब्लॉक(फ्लेक्स-फ्लो:कॉलम रैप )

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

एक संरेखण-सामग्री गुण भी है, जो यह निर्धारित करता है कि ब्लॉक की परिणामी पंक्तियाँ लंबवत रूप से कैसे संरेखित होंगी और वे फ्लेक्स कंटेनर के पूरे स्थान को कैसे विभाजित करेंगी।

महत्वपूर्ण:एलाइन-कंटेंट केवल मल्टी-लाइन मोड में काम करता है (यानी फ्लेक्स-रैप: रैप; या फ्लेक्स-रैप: रैप-रिवर्स के मामले में;)

उपलब्ध मान संरेखित-सामग्री:

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

सीएसएस गुण फ्लेक्स-रैप और एलाइन-कंटेंट को सीधे फ्लेक्स कंटेनर पर लागू किया जाना चाहिए, न कि उसके बच्चों पर।

फ्लेक्स में मल्टी-लाइन गुणों का डेमो

फ्लेक्स कंटेनर (फ्लेक्स ब्लॉक) के चाइल्ड तत्वों के लिए सीएसएस नियम

फ्लेक्स-आधार - एकल फ्लेक्स ब्लॉक का मूल आकार

किसी फ्लेक्स ब्लॉक पर अन्य फ्लेक्स कारकों के आधार पर परिवर्तन लागू करने से पहले उसके लिए प्रारंभिक प्रमुख अक्ष आकार सेट करता है। किसी भी लंबाई इकाइयों (पीएक्स, ईएम, %, ...) या ऑटो (डिफ़ॉल्ट) में निर्दिष्ट किया जा सकता है। यदि ऑटो के रूप में सेट किया जाता है, तो ब्लॉक आयाम (चौड़ाई, ऊंचाई) को आधार के रूप में लिया जाता है, जो बदले में, सामग्री के आकार पर निर्भर हो सकता है, यदि स्पष्ट रूप से निर्दिष्ट नहीं किया गया हो।

फ्लेक्स-ग्रो - एकल फ्लेक्स ब्लॉक का "लालच"।

यह निर्धारित करता है कि यदि आवश्यक हो तो एक व्यक्तिगत फ्लेक्स ब्लॉक आसन्न तत्वों से कितना बड़ा हो सकता है। फ्लेक्स-ग्रो एक आयामहीन मान स्वीकार करता है (डिफ़ॉल्ट 0)

उदाहरण 1:

• यदि किसी फ्लेक्स कंटेनर के अंदर सभी फ्लेक्स बॉक्स में flex-grow:1 है तो वे समान आकार के होंगे
• यदि उनमें से एक में flex-grow:2 है तो यह अन्य सभी से 2 गुना बड़ा होगा

उदाहरण 2:

• यदि किसी फ्लेक्स कंटेनर के अंदर सभी फ्लेक्स बॉक्स में flex-grow:3 है तो वे समान आकार के होंगे
• यदि उनमें से एक में flex-grow:12 है तो यह अन्य सभी से 4 गुना बड़ा होगा

अर्थात्, फ्लेक्स-ग्रो का पूर्ण मान सटीक चौड़ाई निर्धारित नहीं करता है। यह समान स्तर के अन्य फ्लेक्स ब्लॉकों के संबंध में "लालच" की डिग्री निर्धारित करता है।

फ्लेक्स-सिकुड़ना - एकल फ्लेक्स ब्लॉक का "संपीड़न" कारक

यह निर्धारित करता है कि यदि पर्याप्त खाली स्थान नहीं है तो फ्लेक्स कंटेनर के अंदर आसन्न तत्वों के सापेक्ष फ्लेक्स ब्लॉक कितना सिकुड़ जाएगा। डिफ़ॉल्ट 1.

फ्लेक्स - फ्लेक्स-ग्रो, फ्लेक्स-श्रिंक और फ्लेक्स-बेस गुणों के लिए आशुलिपि

फ्लेक्स: कोई नहीं | [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]

सीएसएस

/* अर्थात। ... */ .माय-फ्लेक्स-ब्लॉक(फ्लेक्स-ग्रो:12; फ्लेक्स-श्रिंक:3; फ्लेक्स आधार: 30ईएम; ) /* यह वैसा ही है... */ .माय-फ्लेक्स-ब्लॉक(फ्लेक्स : 12 3 30ईएम )

फ्लेक्स-ग्रो, फ्लेक्स-श्रिंक और फ्लेक्स-बेस के लिए डेमो

संरेखित-स्वयं - अनुप्रस्थ अक्ष के साथ एकल फ्लेक्स ब्लॉक का संरेखण।

व्यक्तिगत फ्लेक्स ब्लॉक के लिए फ्लेक्स कंटेनर की एलाइन-आइटम प्रॉपर्टी को ओवरराइड करना संभव बनाता है।

उपलब्ध संरेखण-स्वयं मान (संरेखण-आइटम के समान 5 विकल्प)

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

ऑर्डर - एक फ्लेक्स कंटेनर के अंदर एकल फ्लेक्स ब्लॉक का ऑर्डर।

डिफ़ॉल्ट रूप से, सभी ब्लॉक HTML में निर्दिष्ट क्रम में एक दूसरे का अनुसरण करेंगे। हालाँकि, इस ऑर्डर को ऑर्डर प्रॉपर्टी का उपयोग करके बदला जा सकता है। इसे पूर्णांक के रूप में निर्दिष्ट किया गया है और डिफ़ॉल्ट 0 है।

ऑर्डर मान अनुक्रम में तत्व की पूर्ण स्थिति निर्दिष्ट नहीं करता है। यह तत्व की स्थिति का भार निर्धारित करता है।

एचटीएमएल

इस स्थिति में, ब्लॉक निम्नलिखित क्रम में मुख्य अक्ष के साथ एक के बाद एक चलेंगे: आइटम5, आइटम1, आइटम3, आइटम4, आइटम2

एलाइन-सेल्फ और ऑर्डर के लिए डेमो

मार्जिन: ऑटो खड़ी. सपने सच हों!

आप फ्लेक्सबॉक्स को कम से कम इसलिए पसंद कर सकते हैं क्योंकि मार्जिन के माध्यम से परिचित क्षैतिज संरेखण: ऑटो यहां वर्टिकल के लिए भी काम करता है!

माई-फ्लेक्स-कंटेनर (डिस्प्ले: फ्लेक्स; ऊंचाई: 300पीएक्स; /* या जो भी */ ) .माई-फ्लेक्स-ब्लॉक (चौड़ाई: 100पीएक्स; /* या जो भी */ ऊंचाई: 100पीएक्स; /* या जो भी * / मार्जिन: ऑटो; /* जादू! ब्लॉक लंबवत और क्षैतिज रूप से केंद्रित है */)

याद रखने वाली चीज़ें

1. आपको फ्लेक्सबॉक्स का उपयोग वहां नहीं करना चाहिए जहां यह आवश्यक नहीं है।
2. क्षेत्रों को परिभाषित करना और कई मामलों में सामग्री का क्रम बदलना अभी भी पृष्ठ संरचना पर निर्भरता बनाने के लिए उपयोगी है। अच्छी तरह सोच लो।
3. फ्लेक्सबॉक्स को समझें और मूल बातें जानें। इससे अपेक्षित परिणाम प्राप्त करना बहुत आसान हो जाता है।
4. मार्जिन के बारे में मत भूलना. अक्ष संरेखण सेट करते समय उन्हें ध्यान में रखा जाता है। यह याद रखना भी महत्वपूर्ण है कि फ्लेक्सबॉक्स में मार्जिन सामान्य प्रवाह की तरह "ढह" नहीं जाता है।
5. फ्लेक्स ब्लॉक के फ्लोट वैल्यू पर ध्यान नहीं दिया जाता है और इसका कोई मतलब नहीं है। फ्लेक्सबॉक्स पर स्विच करते समय इसका उपयोग संभवतः किसी तरह से सुंदर गिरावट के लिए किया जा सकता है।
6. फ्लेक्सबॉक्स वेब घटकों और वेब पेजों के अलग-अलग हिस्सों के लेआउट के लिए बहुत उपयुक्त है, लेकिन बुनियादी लेआउट (लेख, हेडर, पादलेख, नेवबार, आदि की स्थिति) बनाते समय इसने अपना सर्वश्रेष्ठ पक्ष नहीं दिखाया है। यह अभी भी एक विवादास्पद बिंदु है, लेकिन यह लेख कमियों को काफी स्पष्टता से दिखाता है xantir.com/blog/b4580

अंत में

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

सामग्री:

फ्लेक्सबॉक्सपेज पर ब्लॉक व्यवस्थित करने का एक नया तरीका है। यह फ़्लोट्स के विपरीत, तत्वों को बिछाने के लिए विशेष रूप से बनाई गई एक तकनीक है। का उपयोग करके फ्लेक्सबॉक्सआप आसानी से तत्वों को क्षैतिज और लंबवत रूप से संरेखित कर सकते हैं, तत्वों के प्रदर्शन की दिशा और क्रम बदल सकते हैं, ब्लॉकों को मूल की पूरी ऊंचाई तक खींच सकते हैं, या उन्हें निचले किनारे पर कील लगा सकते हैं।

02/02/2017 से अद्यतन:मैंने फ्लेक्सबॉक्स पर एक सुविधाजनक चीट शीट बनाई, जिसमें लाइव डेमो और विशिष्ट विवरण शामिल थे: फ्लेक्सबॉक्स चीटशीट।

उदाहरण केवल नए वाक्यविन्यास का उपयोग करते हैं। लेखन के समय, वे सबसे सही ढंग से प्रदर्शित होते हैं क्रोम. वे फ़ायरफ़ॉक्स में आंशिक रूप से काम करते हैं, लेकिन सफ़ारी में बिल्कुल नहीं।

Caniuse.com के अनुसार, फ्लेक्सबॉक्स IE 8 और 9 और ओपेरा मिनी द्वारा समर्थित नहीं है, और अन्य ब्राउज़रों में सभी गुण समर्थित नहीं हैं और/या उपसर्गों की आवश्यकता है।

इसका मतलब यह है कि अभी तकनीक का व्यापक रूप से उपयोग नहीं किया जा सकता है, लेकिन अब इसे बेहतर तरीके से जानने का समय आ गया है।

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

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

आइए प्रयोगों के लिए एक परीक्षण भूमि तैयार करें:

एक पैरेंट ब्लॉक (पीला) और 5 चाइल्ड ब्लॉक।

प्रदर्शन:फ्लेक्स

और अब हम मूल तत्व में डिस्प्ले: फ्लेक्स जोड़ते हैं। . सामग्री की परवाह किए बिना, आंतरिक डिव्स को समान ऊंचाई के स्तंभों के साथ (मुख्य अक्ष के साथ) पंक्तिबद्ध किया जाता है।

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

यदि मूल ब्लॉक में बिना रैपर के चित्र या पाठ हैं, तो वे अनाम फ्लेक्स आइटम बन जाते हैं।

के लिए संपत्ति प्रदर्शित करें फ्लेक्सबॉक्सदो अर्थ ले सकते हैं:

फ्लेक्स - एक ब्लॉक तत्व की तरह व्यवहार करता है। ब्लॉकों की चौड़ाई की गणना करते समय, लेआउट को प्राथमिकता दी जाती है (यदि ब्लॉक पर्याप्त चौड़े नहीं हैं, तो सामग्री सीमाओं से अधिक हो सकती है)।

इनलाइन-फ्लेक्स - इनलाइन ब्लॉक की तरह व्यवहार करता है। सामग्री को प्राथमिकता दी जाती है (सामग्री ब्लॉकों को आवश्यक चौड़ाई तक फैलाती है ताकि यदि संभव हो तो लाइनें फिट हो जाएं)।

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

ब्लॉक लेआउट की दिशा फ्लेक्स-दिशा संपत्ति द्वारा नियंत्रित की जाती है।

संभावित मान:

पंक्ति - पंक्ति (डिफ़ॉल्ट मान); पंक्ति-रिवर्स - विपरीत क्रम में तत्वों वाली एक पंक्ति; स्तंभ - स्तंभ; कॉलम-रिवर्स - उल्टे क्रम में तत्वों वाला एक कॉलम।

पंक्ति और पंक्ति-विपरीत

कॉलम और कॉलम-रिवर्स

फ्लेक्स-रैप

एक लाइन में कई ब्लॉक हो सकते हैं. वे रैप करते हैं या नहीं, यह फ्लेक्स-रैप प्रॉपर्टी द्वारा निर्धारित किया जाता है।

संभावित मान:

अब्रैप - ब्लॉक स्थानांतरित नहीं किए जाते हैं (डिफ़ॉल्ट मान); लपेटें - ब्लॉक स्थानांतरित किए जाते हैं; रैप-रिवर्स - ब्लॉकों को लपेटा जाता है और उल्टे क्रम में व्यवस्थित किया जाता है।

फ्लेक्स-दिशा और फ्लेक्स-रैप गुणों के शॉर्टहैंड के लिए, एक संपत्ति है: फ्लेक्स-फ्लो।

संभावित मान: आप दोनों गुण या केवल एक सेट कर सकते हैं। उदाहरण के लिए:

फ्लेक्स-फ्लो: कॉलम; फ्लेक्स-फ्लो: रैप-रिवर्स; फ्लेक्स-फ्लो: कॉलम-रिवर्स रैप;

पंक्ति-रिवर्स रैप-रिवर्स के लिए डेमो:

आदेश

ब्लॉकों के क्रम को नियंत्रित करने के लिए, ऑर्डर प्रॉपर्टी का उपयोग करें।

संभावित मान: संख्याएँ. ब्लॉक को पहले रखने के लिए, इसे ऑर्डर दें: -1:

औचित्य-सामग्री

तत्वों को संरेखित करने के लिए कई गुण हैं: औचित्य-सामग्री, संरेखित-आइटम और संरेखित-स्वयं।

जस्टिफाई-कंटेंट और एलाइन-आइटम को पैरेंट कंटेनर पर लागू किया जाता है, एलाइन-सेल्फ को चाइल्ड कंटेनर पर लागू किया जाता है।

justify-content मुख्य अक्ष संरेखण के लिए जिम्मेदार है।

औचित्य-सामग्री के लिए संभावित मान:

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

फ्लेक्स-स्टार्ट और फ्लेक्स-एंड

अंतरिक्ष-बीच, अंतरिक्ष-चारों ओर

संरेखित-आइटम

संरेखण-आइटम लंबवत अक्ष के साथ संरेखित करने के लिए जिम्मेदार है।

संभावित संरेखण-आइटम मान:

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

फ्लेक्स-स्टार्ट, फ्लेक्स-एंड

आधार रेखा, खिंचाव

संरेखित-स्वयं

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

संरेखण-स्वयं के लिए संभावित मान:

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

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

मल्टी-लाइन फ्लेक्स कंटेनर के भीतर संरेखण को नियंत्रित करने के लिए, संरेखण-सामग्री संपत्ति है।

संभावित मान:

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

फ्लेक्स-स्टार्ट, फ्लेक्स-एंड

केंद्र, खिंचाव

अंतरिक्ष-बीच, अंतरिक्ष-चारों ओर

पुनश्च:मैं कभी भी कुछ चीज़ों को क्रियान्वित होते हुए नहीं देख पाया, उदाहरण के लिए, लाइन flex-flow: column रैप या उसी flex-direction: column की पूरी प्रविष्टि; फ्लेक्स-रैप: रैप; .

तत्व एक कॉलम में खड़े होते हैं, लेकिन स्थानांतरित नहीं होते हैं:

रैप flex-direction: column के साथ काम नहीं करता है; , हालाँकि विशिष्टता में यह इस तरह दिखता है:

मुझे लगता है कि यह समय के साथ काम करेगा.

06/21/2014 से अद्यतन:यदि आप ब्लॉक की ऊंचाई निर्धारित करते हैं तो सब कुछ काम करता है। टिप के लिए धन्यवाद

इस लेख में, हम सीएसएस फ्लेक्सबॉक्स तकनीक पेश करेंगे, जो लचीले वेब पेज लेआउट बनाने के लिए डिज़ाइन की गई है।

सीएसएस फ्लेक्सबॉक्स तकनीक के लिए ब्राउज़र समर्थन

फ्लेक्सबॉक्स तकनीक पहले से ही वर्तमान में उपयोग किए जाने वाले लगभग सभी ब्राउज़रों द्वारा समर्थित है (उपसर्गों का उपयोग करते हुए: IE10+, Edge12+, फ़ायरफ़ॉक्स 2+, Chrome 4+, Safari 3.1+, ओपेरा 12.1+, iOS Safari 3.2, ओपेरा मिनी, Android 2.1+, ब्लैकबेरी 7+) .

फ्लेक्सबॉक्स मूल बातें (ग्रिड)

फ्लेक्सबॉक्स एक ग्रिड पर आधारित है। इसमें केवल 2 तत्व शामिल हैं। पहला तत्व है फ्लेक्स कंटेनर. एक फ्लेक्स कंटेनर बनाना आवश्यक HTML तत्व में वैल्यू फ्लेक्स या फ्लेक्स-इनलाइन के साथ एक सीएसएस डिस्प्ले प्रॉपर्टी जोड़कर किया जाता है।

इसके बाद एक फ्लेक्स कंटेनर के सभी तत्काल बच्चे(बच्चे) स्वत: ही बन जाते हैं फ्लेक्स तत्व(दूसरा फ्लेक्सबॉक्स ग्रिड तत्व)।

HTML मार्कअप:

फ्लेक्स-कंटेनर (डिस्प्ले: फ्लेक्स; / * फ्लेक्स || इनलाइन-फ्लेक्स */) फ्लेक्सबॉक्स ग्रिड संरचना

फ्लेक्स आइटम डिफ़ॉल्ट रूप से फ्लेक्स कंटेनर की पूरी ऊंचाई पर कब्जा कर लेते हैं।

फ्लेक्स या फ्लेक्स-इनलाइन का मान यह निर्धारित करता है कि कैसे फ्लेक्स कंटेनरपेज पर प्रस्तुत किया जाएगा. यदि इसे इस रूप में प्रस्तुत करने की आवश्यकता है अवरोध पैदा करना, फिर फ्लेक्स मान का उपयोग करें। यदि किसी तत्व को इस रूप में प्रस्तुत करने की आवश्यकता है छोटे, फिर फ्लेक्स-इनलाइन मान का उपयोग करें। इस मामले में, यह उतना ही पृष्ठ स्थान लेगा जितना इसके तत्वों को प्रदर्शित करने के लिए आवश्यक है।

फ्लेक्स तत्व संरेखण दिशा

फ्लेक्स कंटेनर के अंदर फ्लेक्स तत्वों के संरेखण की दिशा निर्दिष्ट करने का उपयोग किया जाता है कुल्हाड़ियों.

फ्लेक्सबॉक्स में वे आवंटित करते हैं 2 अक्ष. पहली धुरी कहलाती है बुनियादीया मुख्य(डिफ़ॉल्ट रूप से दाईं ओर निर्देशित)। दूसरा - आड़ा(डिफ़ॉल्ट रूप से नीचे की ओर)।

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

कंटेनर में तत्वों की डिफ़ॉल्ट व्यवस्था (फ्लेक्स आइटम जिनके पास फ्लेक्स कंटेनर में पर्याप्त जगह नहीं है वे इसके बाहर गिर जाते हैं)

सीएसएस फ्लेक्सबॉक्स में, फ्लेक्स आइटम को नई लाइनों में ले जाने की अनुमति (यदि उनके पास वर्तमान लाइन में पर्याप्त जगह नहीं है) सीएसएस फ्लेक्स कंटेनर की फ्लेक्स-रैप प्रॉपर्टी को रैप या रैप-रिवर्स पर सेट करके किया जाता है।

फ्लेक्स-रैप: लपेटें; /* अब्रैप (एक पंक्ति में - डिफ़ॉल्ट) रैप (फ्लेक्स आइटम को नई लाइनों में लपेटने की अनुमति दें) रैप-रिवर्स (फ्लेक्स आइटम को उल्टे क्रम में लपेटें) */

फ्लेक्स-रैप सीएसएस प्रॉपर्टी के रैप और रैप-रिवर्स मान क्रॉस अक्ष की दिशा निर्धारित करते हैं।

फ्लेक्सबॉक्स के मुख्य अक्ष की दिशा निर्धारित करना फ्लेक्स-दिशा सीएसएस संपत्ति का उपयोग करके किया जाता है।

फ्लेक्स-दिशा: पंक्ति; /* पंक्ति (दाएं) - डिफ़ॉल्ट पंक्ति-रिवर्स (बाएं) कॉलम (नीचे) कॉलम-रिवर्स (ऊपर) */

इस संपत्ति का उपयोग करके, आप यह सुनिश्चित कर सकते हैं कि फ्लेक्स तत्व क्षैतिज (पंक्तियों में) नहीं, बल्कि लंबवत (स्तंभों में) व्यवस्थित हैं।

फ्लेक्स-दिशा और फ्लेक्स-रैप गुणों को सामान्य सीएसएस संपत्ति फ्लेक्स-फ्लो का उपयोग करके निर्दिष्ट किया जा सकता है:

फ्लेक्स-फ्लो: पंक्ति अब्रैप; /* 1 मान - फ्लेक्स-दिशा, 2 मान - फ्लेक्स-रैप */

फ्लेक्स आइटम को संरेखित करना

फ्लेक्सबॉक्स में, एक कंटेनर के भीतर तत्वों का संरेखण दो दिशाओं (अक्षों) में किया जाता है।

मुख्य अक्ष के साथ फ्लेक्स आइटम को संरेखित करना

मुख्य अक्ष के साथ तत्वों को संरेखित करना justify-content CSS संपत्ति का उपयोग करके किया जाता है:

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

क्रॉस अक्ष के साथ फ्लेक्स आइटम को संरेखित करना

अनुप्रस्थ अक्ष के साथ एक फ्लेक्स कंटेनर में फ्लेक्स आइटम का संरेखण संरेखण-आइटम सीएसएस संपत्ति का उपयोग करके किया जाता है:

संरेखित-आइटम: खिंचाव; /* खिंचाव (अनुप्रस्थ अक्ष की पूरी लंबाई के साथ खिंचाव) - डिफ़ॉल्ट रूप से फ्लेक्स-स्टार्ट (अनुप्रस्थ अक्ष की शुरुआत के सापेक्ष) फ्लेक्स-एंड (अनुप्रस्थ अक्ष के अंत के सापेक्ष) बेसलाइन (आधार रेखा के सापेक्ष) ) केंद्र */ अनुप्रस्थ अक्ष के साथ लचीले तत्वों को संरेखित करने के विकल्प

फ्लेक्स कंटेनर लाइनों को संरेखित करना

सीएसएस फ्लेक्सबॉक्स आपको न केवल फ्लेक्स तत्वों को संरेखित करने की अनुमति देता है, बल्कि उन रेखाओं को भी संरेखित करता है जिन पर वे स्थित हैं।

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

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

संरेखित-स्वयं सीएसएस संपत्ति

संरेखण-स्वयं संपत्ति, पिछले वाले (जस्टिफाई-कंटेंट, संरेखण-आइटम और संरेखण-सामग्री) के विपरीत, फ्लेक्स तत्वों के लिए अभिप्रेत है। यह आपको बदलने की अनुमति देता है फ्लेक्स तत्व संरेखणअनुप्रस्थ अक्ष की दिशा में. संरेखण-स्वयं संपत्ति संरेखण-आइटम के समान मान ले सकती है।

संरेखित-आइटम: खिंचाव; /* स्वतः (डिफ़ॉल्ट) || खिंचाव || फ्लेक्स-स्टार्ट || फ्लेक्स-एंड || आधार रेखा || केंद्र */

फ्लेक्स-कंटेनर (प्रदर्शन: फ्लेक्स; चौड़ाई: 300px; ऊंचाई: 150px; संरेखित-आइटम: केंद्र; पैडिंग: 10px; पृष्ठभूमि-रंग: #efefef; ) .flex-container_element-1, .flex-container_element-2, .flex -कंटेनर_एलिमेंट-3, .फ्लेक्स-कंटेनर_एलिमेंट-4 (फ्लेक्स-आधार: 70पीएक्स; टेक्स्ट-एलाइन: सेंटर; पैडिंग: 15पीएक्स; फॉन्ट-साइज: 30पीएक्स; ) .फ्लेक्स-कंटेनर_एलिमेंट-1 (एलाइन-सेल्फ: फ्लेक्स-स्टार्ट; बैकग्राउंड: #fe4; ) .फ्लेक्स-कंटेनर_एलिमेंट-2 ( एलाइन-सेल्फ: फ्लेक्स-एंड; बैकग्राउंड: पिंक; ) .फ्लेक्स-कंटेनर_एलिमेंट-3 ( एलाइन-सेल्फ: स्ट्रेच; बैकग्राउंड: लाइम; ) .फ्लेक्स-कंटेनर_एलिमेंट-4 (एलाइन-सेल्फ: ऑटो; बैकग्राउंड: सियान;) सीएसएस एलाइन-सेल्फ प्रॉपर्टी कैसे काम करती है

फ्लेक्स आइटम का क्रम बदलना

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

आदेश: 0; /* 0 (डिफ़ॉल्ट) धनात्मक या ऋणात्मक पूर्णांक */

उदाहरण के लिए:

सीएसएस: .फ्लेक्स-कंटेनर (डिस्प्ले: फ्लेक्स;) /* दूसरे फ्लेक्स तत्व को अंत तक ले जाएं */ .फ्लेक्स-कंटेनर_एलिमेंट-2 (क्रम: 2;) /* तीसरे तत्व को 2 पर ले जाएं */ .फ्लेक्स-कंटेनर_एलिमेंट-3 (ऑर्डर: 1;) /* 4 फ्लेक्स तत्वों को 1 से पहले रखें */ .फ्लेक्स-कंटेनर_एलिमेंट-4 (ऑर्डर: -1;) सीएसएस ऑर्डर प्रॉपर्टी कैसे काम करती है

फ्लेक्स तत्व की चौड़ाई को नियंत्रित करना

फ्लेक्सबॉक्स में कई सीएसएस गुण हैं जो यह निर्धारित करते हैं कि फ्लेक्स तत्व कितना चौड़ा हो सकता है।

सीएसएस संपत्ति फ्लेक्स-आधार

यह संपत्ति इसके लिए अभिप्रेत है फ्लेक्स तत्व की प्रारंभिक चौड़ाई निर्धारित करना. आप माप की विभिन्न इकाइयों, जैसे कि px, %, em, आदि का उपयोग करके चौड़ाई मान निर्धारित कर सकते हैं। डिफ़ॉल्ट रूप से, यह संपत्ति ऑटो पर सेट है (इस मामले में, तत्व की चौड़ाई की गणना इसकी सामग्री के आधार पर स्वचालित रूप से की जाएगी) .

फ्लेक्स आइटम की अंतिम चौड़ाई किसके द्वारा निर्धारित की जाएगी?फ्लेक्स-ग्रो और फ्लेक्स-श्रिंक सीएसएस गुणों के मूल्यों पर निर्भर करता है जो न केवल इस तत्व के लिए, बल्कि इस फ्लेक्स कंटेनर के अन्य फ्लेक्स तत्वों के लिए भी निर्धारित हैं।

फ्लेक्स-ग्रो सीएसएस संपत्ति

यह गुण यह निर्धारित करता है कि फ्लेक्स तत्व की प्रारंभिक चौड़ाई बढ़ती है (बढ़ती है). फ्लेक्स तत्व की चौड़ाई बढ़ाने का कार्य किसके द्वारा किया जाता है? मुक्त पंक्ति स्थान. फ्लेक्स-ग्रो सीएसएस संपत्ति का मूल्य है पूर्णांक. यह वह मान है जो निर्धारित करता है (यदि यह 1 से अधिक या उसके बराबर है) तो फ्लेक्स तत्व खाली स्थान का कितना हिस्सा अपने लिए लेगा।

उदाहरण के लिए:

सीएसएस: .फ्लेक्स-कंटेनर (डिस्प्ले: फ्लेक्स; चौड़ाई: 600पीएक्स; ) .फ्लेक्स-कंटेनर_एलिमेंट-1 (फ्लेक्स-आधार: 40%; फ्लेक्स-ग्रो: 1; ) .फ्लेक्स-कंटेनर_एलिमेंट-2 (फ्लेक्स-आधार: 40% ; flex-grow: 4; ) CSS संपत्ति flex-grow कैसे काम करती है

इस उदाहरण में, यदि फ्लेक्स आइटम एक ही पंक्ति पर स्थित हैं और खाली स्थान है (600×(1-0.8)=120px):

• इस स्थान का 1/5 भाग element.flex-container_element-1 (120×1/5=24px) की चौड़ाई में जोड़ा जाएगा;
• इस स्थान का 4/5 भाग element.flex-container_element-2 (120×4/5=96px) की चौड़ाई में जोड़ा जाएगा।

दूसरे शब्दों में, फ्लेक्स-ग्रो सीएसएस प्रॉपर्टी आपको न केवल यह निर्दिष्ट करने की अनुमति देती है कि फ्लेक्स तत्व की चौड़ाई बढ़ सकती है, बल्कि यह भी निर्दिष्ट कर सकती है कि यह मान अन्य तत्वों के संबंध में कितना बढ़ सकता है।

डिफ़ॉल्ट रूप से, सीएसएस प्रॉपर्टी फ्लेक्स-ग्रो 0 पर सेट है। इसका मतलब है कि फ्लेक्स तत्व बढ़ नहीं सकता (इसकी चौड़ाई नहीं बढ़ा सकता)।

फ्लेक्स-सिकुड़ सीएसएस संपत्ति

यह गुण निर्धारित करता है कि फ्लेक्स तत्व की चौड़ाई कम की जा सकती है या नहीं। फ्लेक्स तत्व की चौड़ाई कम करना तभी होगा जब लाइन की चौड़ाई सभी फ्लेक्स आइटम प्रदर्शित करने के लिए पर्याप्त नहीं होगीइसमें स्थित है. आवश्यक चौड़ाई की गणना की जाती है प्रारंभिक चौड़ाई के आधार पर, जिसमें हर फ्लेक्स तत्व मौजूद है।

उदाहरण के लिए:

सीएसएस: .फ्लेक्स-कंटेनर (डिस्प्ले: फ्लेक्स; चौड़ाई: 500पीएक्स; ) .फ्लेक्स-कंटेनर_एलिमेंट-1 (फ्लेक्स-आधार: 300पीएक्स; फ्लेक्स-श्रिंक: 1; ) .फ्लेक्स-कंटेनर_एलिमेंट-2 (फ्लेक्स-आधार: 300पीएक्स; फ्लेक्स -श्रिंक: 3; ) सीएसएस प्रॉपर्टी फ्लेक्स-श्रिंक कैसे काम करती है

फ्लेक्स कंटेनर की चौड़ाई 500px है। फ्लेक्स आइटम को प्रदर्शित करने के लिए 600px की आवश्यकता होती है। परिणामस्वरूप, 100px गायब है। इस उदाहरण में, 2 फ्लेक्स तत्वों (.flex-container_element-1 और .flex-container_element-2) को कम किया जा सकता है। इस मामले में पहले फ्लेक्स element.flex-container_element-1 की चौड़ाई 300 - 1/4*100= 275px होगी। इस मामले में दूसरे फ्लेक्स element.flex-container_element-2 की चौड़ाई 300 - 3/4*100= 225px होगी।

डिफ़ॉल्ट मान:

फ्लेक्स-सिकुड़ना: 1;

अगर आपको चाहिये फ्लेक्स तत्व की चौड़ाई को कम होने से रोकें, तो आपको फ्लेक्स-श्रिंक प्रॉपर्टी के मान के रूप में संख्या 0 निर्दिष्ट करनी होगी।

सीएसएस फ्लेक्स संपत्ति

फ्लेक्स-ग्रो, फ्लेक्स-श्रिंक और फ्लेक्स-बेस को आसानी से सेट करने के लिए, आप फ्लेक्स सीएसएस प्रॉपर्टी का उपयोग कर सकते हैं।

डिफ़ॉल्ट मान:

फ्लेक्स: 0 1 ऑटो; /* 0 - फ्लेक्स-ग्रो (पहला मान) 1 - फ्लेक्स-श्रिंक (दूसरा मान) ऑटो - फ्लेक्स-आधार (तीसरा मान) */

सीएसएस फ्लेक्सबॉक्स का उपयोग करके पेज लेआउट

इस अनुभाग में, हम फ्लेक्सबॉक्स का उपयोग करके एक सरल प्रतिक्रियाशील लेआउट बनाएंगे।

लेआउट संरचना में 3 खंड शामिल होंगे:

• हेडर (हेडर और मुख्य मेनू प्रदर्शित करने के लिए);
• मुख्य (मुख्य भाग प्रदर्शित करने के लिए);
• पाद लेख (पाद लेख के लिए).

बदले में, मुख्य भाग को 2 और खंडों में विभाजित किया जाएगा (हम उन्हें सीएसएस फ्लेक्सबॉक्स का उपयोग करके स्थिति देंगे)। बड़ी स्क्रीन (>=992px) पर ये अनुभाग क्षैतिज रूप से पंक्तिबद्ध होंगे, और अन्य स्क्रीन पर - लंबवत (<992px).

[पेज हैडर...]

[मुख्य हिस्सा...]

सीएसएस: /* कंटेनर (व्यूपोर्ट की चौड़ाई के आधार पर ब्लॉक की चौड़ाई निर्धारित करता है) */ .कंटेनर (स्थिति: सापेक्ष; मार्जिन-बाएं: ऑटो; मार्जिन-दाएं: ऑटो; पैडिंग-दाएं: 15पीएक्स; पैडिंग-बाएं: 15पीएक्स;) @ मीडिया (न्यूनतम-चौड़ाई: 576px) ( .कंटेनर (चौड़ाई: 540px; अधिकतम-चौड़ाई: 100%; ) ) @मीडिया (न्यूनतम-चौड़ाई: 768px) ( .कंटेनर (चौड़ाई: 720px; अधिकतम-चौड़ाई: 100%; ) ) @मीडिया (न्यूनतम-चौड़ाई: 992px) ( .कंटेनर (चौड़ाई: 960px; अधिकतम-चौड़ाई: 100%; ) ) @मीडिया (न्यूनतम-चौड़ाई: 1200px) ( .कंटेनर (चौड़ाई: 1140px; अधिकतम-चौड़ाई: 100 % ; ) ) /* फ्लेक्स कंटेनर */ .रो-फ्लेक्स ( डिस्प्ले: -वेबकिट-बॉक्स; डिस्प्ले: -वेबकिट-फ्लेक्स; डिस्प्ले: -एमएस-फ्लेक्सबॉक्स; डिस्प्ले: फ्लेक्स; -वेबकिट-फ्लेक्स-रैप: रैप; - एमएस-फ्लेक्स-रैप: रैप; फ्लेक्स-रैप: रैप; मार्जिन-राइट: -15पीएक्स; न्यूनतम-ऊंचाई: 1px; पैडिंग-दाएं: 15px; पैडिंग-बाएं: 15px; -वेबकिट-फ्लेक्स: 0 0 100%; -एमएस-फ्लेक्स: 0 0 100%; फ्लेक्स: 0 0 100%; अधिकतम-चौड़ाई: 100%; ) /* लेख की चौड़ाई और बड़ी स्क्रीन के लिए अलग ब्लॉक */ @मीडिया (न्यूनतम-चौड़ाई: 992पीएक्स) ( /* कंटेनर चौड़ाई का 2/3 */ .main_article ( -वेबकिट-बॉक्स-फ्लेक्स: 0; -वेबकिट-फ्लेक्स : 0 0 66.666667%; -एमएस-फ्लेक्स: 0 0 66.666667%; अधिकतम-चौड़ाई: 66.666667% ) /* कंटेनर की चौड़ाई का 1/3 */ .main_aside ( -webkit-box-flex: 0; -वेबकिट-फ्लेक्स: 0 0 33.333333%; -एमएस-फ्लेक्स: 0 0 33.333333%;

अधिकांश ब्राउज़रों में लेआउट का समर्थन करने के लिए, हम सीएसएस में आवश्यक उपसर्ग और अधिकतम-चौड़ाई जोड़ देंगे।

किसी ब्लॉक को फ्लेक्स कंटेनर में "बदलने" के लिए, हम रो-फ्लेक्स क्लास का उपयोग करेंगे। हम फ्लेक्स सीएसएस प्रॉपर्टी का उपयोग करके फ्लेक्स कंटेनर के अंदर प्रत्येक फ्लेक्स तत्व (main_article और main_aside) की चौड़ाई निर्धारित करेंगे।

उदाहरण के तौर पर, आइए "फ़ुटर" ब्लॉक और मुख्य-लेख अनुभाग "साइट पर दिलचस्प चीजें" के अनुभाग को चिह्नित करने के लिए फ्लेक्सबॉक्स का उपयोग करें।

हम "फ़ुटर" अनुभाग को 4 बराबर भागों में विभाजित करेंगे (एक भाग की न्यूनतम चौड़ाई 200px है), और "साइट पर दिलचस्प चीज़ें" को 3 भागों में विभाजित करेंगे (एक भाग की न्यूनतम चौड़ाई 300px है)।

[पेज हैडर...]

[मुख्य हिस्सा...]

[1 अधिक...]

[2 और...]

[3 और...]

अतिरिक्त सीएसएस:

फूटर_ब्लॉक, .main_other_article ( -वेबकिट-फ्लेक्स-आधार: 0; -एमएस-फ्लेक्स-पसंदीदा-आकार: 0; फ्लेक्स-आधार: 0; -वेबकिट-बॉक्स-फ्लेक्स: 1; -वेबकिट-फ्लेक्स-ग्रो: 1; - एमएस-फ्लेक्स-पॉजिटिव: 1; फ्लेक्स-ग्रो: 1; अधिकतम-चौड़ाई: 100% )

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

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

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

टिप्पणी: फ्लेक्सबॉक्स लेआउट एप्लिकेशन घटकों और छोटे पैमाने के लेआउट के लिए सबसे उपयुक्त है, जबकि ग्रिड लेआउट का उपयोग बड़े पैमाने के लेआउट के लिए अधिक किया जाता है।

मूल बातें

क्योंकि फ्लेक्सबॉक्स एक संपूर्ण मॉड्यूल है, केवल एक संपत्ति नहीं, यह कई संपत्तियों को जोड़ती है। उनमें से कुछ को कंटेनर (मूल तत्व, तथाकथित) पर लागू किया जाना चाहिए फ्लेक्स कंटेनर), जबकि अन्य गुण बाल तत्वों पर लागू होते हैं, या लचीले तत्व.

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

मूलतः तत्वों को या तो साथ-साथ वितरित किया जाएगा मुख्य धुरी(से मुख्य शुरुआतपहले मुख्य-अंत), या साथ में अनुप्रस्थ अक्ष(से क्रॉस-स्टार्टपहले पार अंत).

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

गुण

प्रदर्शन: फ्लेक्स | इनलाइन-फ्लेक्स;

यह इस पर लागू होता है:

एक फ्लेक्स कंटेनर (चयनित मान के आधार पर इनलाइन या ब्लॉक) को परिभाषित करता है, इसके सभी तत्काल बच्चों के लिए एक फ्लेक्स संदर्भ जोड़ता है।

प्रदर्शन: अन्य मान | फ्लेक्स | इनलाइन-फ्लेक्स;

ध्यान रखें:

• सीएसएस कॉलम फ्लेक्स कंटेनर के साथ काम नहीं कर रहे हैं
• फ़्लोट, स्पष्ट और लंबवत-संरेखण फ्लेक्स आइटम के साथ काम नहीं करते हैं

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

यह इस पर लागू होता है:फ्लेक्स कंटेनर का मूल तत्व।

मुख्य अक्ष को मुख्य-अक्ष पर सेट करता है, जिससे कंटेनर में रखे गए फ्लेक्स आइटम के लिए दिशा परिभाषित होती है।

फ्लेक्स-दिशा : पंक्ति | पंक्ति-विपरीत | कॉलम | कॉलम-रिवर्स

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

फ्लेक्स-रैप

यह इस पर लागू होता है:फ्लेक्स कंटेनर का मूल तत्व।

यह निर्धारित करता है कि कंटेनर सिंगल-लाइन या मल्टी-लाइन होगा, साथ ही क्रॉस अक्ष की दिशा, जो यह निर्धारित करती है कि नई लाइनें किस दिशा में रखी जाएंगी।

फ्लेक्स-रैप : अब्रैप | लपेटो | रैप-रिवर्स

• अब्रैप (डिफ़ॉल्ट): सिंगल-लाइन / एलटीआर के लिए बाएं से दाएं, आरटीएल के लिए दाएं से बाएं;
• रैप: मल्टीलाइन / एलटीआर के लिए बाएं से दाएं, आरटीएल के लिए दाएं से बाएं;
• रैप-रिवर्स: एलटीआर के लिए मल्टीलाइन / दाएं से बाएं, आरटीएल के लिए बाएं से दाएं।

फ्लेक्स-प्रवाह

यह इस पर लागू होता है:फ्लेक्स कंटेनर का मूल तत्व।

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

फ्लेक्स-फ्लो:<"flex-direction" > || <"flex-wrap" >

यह इस पर लागू होता है:फ्लेक्स कंटेनर का मूल तत्व।

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

: फ्लेक्स-स्टार्ट | फ्लेक्स-एंड | केंद्र | बीच का स्थान | अंतरिक्ष-चारों ओर

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

यह इस पर लागू होता है:फ्लेक्स कंटेनर का मूल तत्व।

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

: फ्लेक्स-स्टार्ट | फ्लेक्स-एंड | केंद्र | आधार रेखा | खींचना

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

यह इस पर लागू होता है:फ्लेक्स कंटेनर का मूल तत्व।

क्रॉस अक्ष पर खाली स्थान होने पर फ्लेक्स कंटेनर की पंक्तियों को संरेखित करता है, ठीक उसी तरह जैसे कि justify-content मुख्य अक्ष पर करता है।

टिप्पणी: यह प्रॉपर्टी सिंगल-लाइन फ्लेक्सबॉक्स के साथ काम नहीं करती है।

: फ्लेक्स-स्टार्ट | फ्लेक्स-एंड | केंद्र | बीच का स्थान | अंतरिक्ष-चारों ओर | खींचना

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

आदेश

यह इस पर लागू होता है:

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

आदेश देना:<पूर्णांक >

फ्लेक्स-ग्रो

यह इस पर लागू होता है:बाल तत्व/फ्लेक्स तत्व।

आवश्यकता पड़ने पर फ्लेक्स तत्व के "बढ़ने" की क्षमता को परिभाषित करता है। एक आयामहीन मान लेता है जो अनुपात के रूप में कार्य करता है। यह निर्धारित करता है कि कोई तत्व किसी कंटेनर के अंदर कितनी खाली जगह ले सकता है।

यदि सभी तत्वों की फ्लेक्स-ग्रो प्रॉपर्टी 1 पर सेट है, तो कंटेनर के अंदर प्रत्येक बच्चे का आकार समान होगा। यदि आप बच्चों में से एक को 2 पर सेट करते हैं, तो यह अन्य बच्चों की तुलना में दोगुनी जगह लेगा।

फ्लेक्स-ग्रो:<संख्या >(डिफ़ॉल्ट 0)

फ्लेक्स-सिकुड़ना

यह इस पर लागू होता है:बाल तत्व/फ्लेक्स तत्व।

आवश्यकता पड़ने पर किसी फ्लेक्स आइटम के सिकुड़ने की क्षमता को परिभाषित करता है।

फ्लेक्स-सिकुड़ना: (डिफ़ॉल्ट 1)

ऋणात्मक संख्याएँ स्वीकार नहीं की जातीं.

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

यह इस पर लागू होता है:बाल तत्व/फ्लेक्स तत्व।

कंटेनर में स्थान आवंटित करने से पहले किसी तत्व के लिए डिफ़ॉल्ट आकार को परिभाषित करता है।

फ्लेक्स आधार:<लंबाई >| ऑटो (डिफ़ॉल्ट ऑटो)

मोड़ना

यह इस पर लागू होता है:बाल तत्व/फ्लेक्स तत्व।

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

फ्लेक्स: कोई नहीं | [<"flex-grow" > <"flex-shrink" >? || <"flex-basis" > ]

संरेखित-स्वयं

यह इस पर लागू होता है:बाल तत्व/फ्लेक्स तत्व।

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

उपलब्ध मूल्यों की बेहतर समझ के लिए संरेखण-आइटम संपत्ति का विवरण देखें।

संरेखित-स्वयं: ऑटो | फ्लेक्स-स्टार्ट | फ्लेक्स-एंड | केंद्र | आधार रेखा | खींचना

उदाहरण

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

.पैरेंट (डिस्प्ले: फ्लेक्स; ऊंचाई: 300px; /* या जो कुछ भी */) .बच्चा (चौड़ाई : 100px ; /* या जो कुछ भी */ऊंचाई: 100px; /* या जो कुछ भी */मार्जिन: ऑटो; /* जादू! */ )

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

आइए अब कुछ गुणों का उपयोग करें। एक निश्चित आकार (सौंदर्य के लिए) के 6 तत्वों के एक सेट की कल्पना करें, लेकिन कंटेनर का आकार बदलने की क्षमता के साथ। हम उन्हें समान रूप से क्षैतिज रूप से वितरित करना चाहते हैं ताकि जब ब्राउज़र विंडो का आकार बदला जाए, तो सब कुछ अच्छा दिखे (कोई @मीडिया प्रश्न नहीं!)।

.फ्लेक्स-कंटेनर( /* सबसे पहले, आइए एक फ्लेक्स संदर्भ बनाएं */प्रदर्शन: फ्लेक्स; /* अब आइए प्रवाह की दिशा निर्धारित करें और क्या हम चाहते हैं कि तत्व एक नई लाइन पर लपेटे जाएं * याद रखें कि यह वैसा ही है: * फ्लेक्स-दिशा: पंक्ति; * फ्लेक्स-रैप: रैप; */फ्लेक्स-फ्लो : पंक्ति लपेट; /* अब आइए निर्धारित करें कि स्थान का वितरण कैसे किया जाएगा */: अंतरिक्ष-चारों ओर; )

तैयार। बाकी सब कुछ पंजीकरण का मामला है। नीचे इस उदाहरण को प्रदर्शित करने वाला एक कोडपेन है। ब्राउज़र विंडो को खींचने/छोड़ने का प्रयास अवश्य करें और देखें कि क्या होता है।

इस पेन को देखें!

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

/* बड़ी स्क्रीन*/.नेविगेशन (डिस्प्ले : फ्लेक्स; फ्लेक्स-फ्लो : रो रैप; /* तत्वों को मुख्य अक्ष के साथ पंक्ति के अंत में स्थानांतरित करता है */: फ्लेक्स-एंड; ) @मीडिया सभी और (अधिकतम-चौड़ाई: 800px ) ( .नेविगेशन ( /* मध्यम आकार की स्क्रीन के लिए, हम नेविगेशन को केंद्र में रखते हैं, तत्वों के बीच समान रूप से स्थान वितरित करते हैं */: अंतरिक्ष-चारों ओर; ) ) /* छोटी स्क्रीन*/@मीडिया सभी और (अधिकतम-चौड़ाई: 500px ) ( .नेविगेशन ( /* छोटी स्क्रीन पर, हम तत्वों को एक पंक्ति के बजाय एक कॉलम में व्यवस्थित करते हैं */फ्लेक्स-दिशा: स्तंभ; ) ) इस पेन को जांचें!

आइए कुछ बेहतर प्रयास करें और फ्लेक्स आइटम के लचीलेपन के साथ खेलें! पूर्ण-चौड़ाई वाले शीर्षलेख और पादलेख के साथ मोबाइल-अनुकूल तीन-स्तंभ लेआउट के बारे में क्या ख़याल है? और व्यवस्था के एक अलग क्रम में.

.रैपर (डिस्प्ले : फ्लेक्स; फ्लेक्स-फ्लो : रो रैप; ) /* सभी तत्वों की चौड़ाई 100% पर सेट करें */.हेडर, .मेन, .नेव, .एसाइड, .फुटर (फ्लेक्स: 1 100%;) /* इस मामले में, हम * मोबाइल उपकरणों को लक्षित करने के लिए मूल आदेश पर भरोसा करते हैं: * 1. हेडर * 2. नेविगेशन * 3. मुख्य * 4. एक तरफ * 5. पाद लेख */ /*मध्यम आकार की स्क्रीन*/@मीडिया सभी और (न्यूनतम-चौड़ाई: 600px) ( /* दोनों साइडबार एक ही लाइन पर स्थित हैं */.एकतरफ (फ्लेक्स: 1 ऑटो; )) /* बड़ी स्क्रीन*/@मीडिया सभी और (न्यूनतम-चौड़ाई: 800px) ( /* हम .aside-1 और .main तत्वों की स्थिति की अदला-बदली करते हैं, और * मुख्य तत्व को साइडबार से दोगुनी जगह लेने के लिए भी कहते हैं। */.मेन (फ्लेक्स: 2 0px;).एसाइड-1 (ऑर्डर: 1;).मेन (ऑर्डर: 2;).एसाइड-2 (ऑर्डर: 3;).फुटर (ऑर्डर: 4;))