CSS फ्लेक्सबॉक्स जनरेटर

कैसे उपयोग करें

1. कंटेनर गुण सेट करें: flex कंटेनर कॉन्फ़िगर करें, flex-direction, justify-content, align-items आदि।
2. flex आइटम जोड़ें और कॉन्फ़िगर करें: चाइल्ड आइटम जोड़ें और प्रत्येक के लिए flex-grow, flex-shrink, flex-basis, align-self और order सेट करें।
3. CSS कॉपी करें: कंटेनर और आइटमों के लिए पूर्ण CSS प्राप्त करें, आपकी परियोजना में उपयोग के लिए तैयार।

Flexbox जनरेटर क्यों इस्तेमाल करें?

Flexbox एक-आयामी CSS लेआउट के लिए आवश्यक टूल है, एक पंक्ति या कॉलम में आइटम संरेखित करना। इस जनरेटर के साथ, आप दृश्य रूप से कॉन्फ़िगर कर सकते हैं और तैयार CSS प्राप्त कर सकते हैं।

विशेषताएँ

• इंटरैक्टिव पूर्वावलोकन: flex आइटम खींचें और गुणों को टॉगल करें और वास्तविक समय में परिवर्तन देखें।
• सभी कंटेनर गुण: flex-direction, flex-wrap, justify-content, align-items, align-content और gap।
• प्रति-आइटम नियंत्रण: प्रत्येक flex आइटम के लिए flex-grow, flex-shrink, flex-basis, align-self और order व्यक्तिगत रूप से सेट करें।
• दृश्य अक्ष संकेतक: मुख्य अक्ष और क्रॉस अक्ष को हाइलाइट किया जाता है ताकि Flexbox मॉडल को सुदृढ़ किया जा सके।
• CSS आउटपुट: कंटेनर और सभी कॉन्फ़िगर किए गए आइटम के लिए पूर्ण, कॉपी-तैयार CSS।

अक्सर पूछे जाने वाले प्रश्न

justify-content और align-items में क्या अंतर है?

justify-content तत्वों को प्रमुख अक्ष (डिफ़ॉल्ट रूप से क्षैतिज) के साथ वितरित करता है। align-items तत्वों को पार अक्ष (डिफ़ॉल्ट रूप से लंबवत) के साथ संरेखित करता है। जब flex-direction column है, तो अक्ष उलट जाते हैं, justify-content लंबवत हो जाता है और align-items क्षैतिज।

Flexbox या CSS Grid का उपयोग कब करें?

एक-आयामी लेआउट के लिए Flexbox का उपयोग करें, बटन की एक पंक्ति, नेविगेशन बार, कार्ड की सूची जो रैप करनी चाहिए। दो-आयामी लेआउट के लिए CSS Grid का उपयोग करें जहाँ आपको एक साथ पंक्तियों और कॉलमों को नियंत्रित करने की आवश्यकता है, जैसे एक पूर्ण लेआउट या एक जटिल कार्ड ग्रिड।

flex: 1 का क्या मतलब है?

flex: 1 flex-grow: 1; flex-shrink: 1; flex-basis: 0% के लिए शॉर्टहैंड है। यह तत्व को उपलब्ध स्थान भरने के लिए बढ़ने, यदि आवश्यक हो तो सिकुड़ने, और स्थान वितरित करने से पहले शून्य से शुरू करने के लिए कहता है। flex: 1 वाले सभी तत्व स्थान को समान रूप से साझा करते हैं।

Flexbox kya hai?

Flexbox (Flexible Box Layout) एक CSS लेआउट मॉडल है जो एक-आयामी दिशा में स्थान वितरित करने और आइटम संरेखित करने के लिए डिज़ाइन किया गया है: या तो पंक्ति या स्तंभ। यह दो मूल अवधारणाएँ पेश करता है जो सब कुछ निर्धारित करती हैं: मुख्य अक्ष (वह प्राथमिक दिशा जिसमें आइटम बहते हैं, डिफ़ॉल्ट रूप से क्षैतिज) और क्रॉस अक्ष (मुख्य पर लंबवत, डिफ़ॉल्ट रूप से ऊर्ध्वाधर)। एक बार जब आप मुख्य बनाम क्रॉस को आत्मसात कर लेते हैं, हर Flexbox गुण उनमें से एक से मेल खाता है: justify-content मुख्य अक्ष पर काम करता है, align-items क्रॉस अक्ष पर काम करता है, flex-direction अक्षों को बदलता है।

Flexbox ने उन लेआउट समस्याओं का सेट हल किया जो 1998 से 2014 तक वेब डेवलपर्स को परेशान करती थीं। Flexbox से पहले, किसी तत्व को लंबवत केंद्रित करने के लिए हैक की आवश्यकता थी (display: table-cell, नकारात्मक मार्जिन, translate transforms के साथ position: absolute)। समान-ऊँचाई स्तंभों के लिए बैकग्राउंड इमेज वाली «faux columns» तकनीक चाहिए थी। Sticky footers को सटीक पिक्सेल गणनाओं की आवश्यकता थी। Flexbox ने यह सब तुच्छ बना दिया: एक-पंक्ति की घोषणा दशकों के CSS workarounds की जगह लेती है। समझौता यह है कि Flexbox एक-आयामी है; दो-आयामी लेआउट (पंक्ति और स्तंभ एक साथ) के लिए, CSS Grid (2017 में जारी) बेहतर उपकरण है।

Flexbox गुण साफ़-साफ़ दो समूहों में विभाजित होते हैं: कंटेनर गुण (parent पर लागू: display: flex, flex-direction, flex-wrap, justify-content, align-items, align-content, gap) और आइटम गुण (बच्चों पर लागू: flex-grow, flex-shrink, flex-basis, align-self, order)। कंटेनर गुण लेआउट पैटर्न नियंत्रित करते हैं; आइटम गुण व्यक्तिगत अपवाद नियंत्रित करते हैं। यह जनरेटर दोनों सेट दिखाता है ताकि आप कोड लिखे बिना प्रयोग कर सकें कि वे कैसे परस्पर क्रिया करते हैं।

Generator ke andar kya hai

लाइव पूर्वावलोकन एक flex कंटेनर है जिसमें नमूना child तत्व हैं। जब आप ड्रॉपडाउन और इनपुट के माध्यम से कंटेनर गुण (flex-direction, justify-content, आदि) बदलते हैं, JavaScript पूर्वावलोकन कंटेनर की inline शैली अपडेट करता है, और ब्राउज़र लेआउट को फिर से रेंडर करता है। पूर्वावलोकन वास्तविक ब्राउज़र का Flexbox कार्यान्वयन है, JavaScript सिमुलेशन नहीं: आप देखते हैं कि आपका CSS वास्तविक पृष्ठ पर बिल्कुल क्या उत्पन्न करेगा।

प्रति-आइटम नियंत्रण आपको हर child को व्यक्तिगत रूप से समायोजित करने देते हैं। आप आइटम जोड़ या हटा सकते हैं, उनके flex-grow, flex-shrink, flex-basis, align-self, और order मान सेट कर सकते हैं, और देख सकते हैं कि कंटेनर तदनुसार स्थान को कैसे पुनर्वितरित करता है। दृश्य अक्ष संकेतक वर्तमान कॉन्फ़िगरेशन के लिए मुख्य और क्रॉस अक्ष दिखाते हैं, मानसिक मॉडल को सुदृढ़ करते हैं। गुण वास्तविक CSS हैं जिन्हें आप सीधे अपने स्टाइलशीट में कॉपी कर सकते हैं, कोई transpilation या framework prefixes की आवश्यकता नहीं।

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

Itihaas aur prishthbhumi

• CSS 2.1 लेआउट अराजकता, 1998 से 2008।Flexbox से पहले, वेब डेवलपर्स लेआउट के लिए clearfix हैक के साथ float: left, whitespace बग के साथ display: inline-block, या table-cell चालों के साथ display: table का उपयोग करते थे। लंबवत केंद्रीकरण के लिए table-cells पर vertical-align, नकारात्मक मार्जिन चालें, या निरपेक्ष positioning चाहिए थी। समान स्तंभों के लिए JavaScript चाहिए था। वेब समुदाय हजारों ब्लॉग पोस्ट उत्पन्न करता था कि «X को CSS के साथ कैसे करें» workarounds के बारे में।
• पहला Flexible Box मसौदा, 2009।W3C CSS Working Group जुलाई 2009 में CSS Flexible Box Layout Module का पहला Working Draft प्रकाशित करता है, तीन syntaxes अगले पाँच वर्षों में विकसित होती हैं: मूल box-* syntax (जल्दी अप्रचलित), 2011 की flexbox मध्यवर्ती syntax (अभी भी विरासत IE 10 कोड में देखी जाती है), और अंतिम flex syntax जिसे हम आज उपयोग करते हैं।
• ब्राउज़र समर्थन स्थिर होता है, 2014।Chrome 29, Firefox 28, Safari 9, और IE 11 सभी 2014 तक कार्यशील Flexbox जारी करते हैं, IE 11 buggy edge cases बनाए रखता है। «Flexbox भविष्य है» से «Flexbox वर्तमान है» का संक्रमण 2014-2015 में होता है जब उत्पादन साइटें इसे प्रमुख लेआउट के लिए अपनाती हैं। «Holy Grail Layout» (header, footer, दो sidebars, मुख्य सामग्री) तुच्छ हो जाता है।
• Chris Coyier का «A Complete Guide to Flexbox», 2013।CSS-Tricks Chris Coyier का व्यापक Flexbox गाइड प्रकाशित करता है (अप्रैल 2013), जो कैनोनिकल संदर्भ बन जाता है। 2016 तक, गाइड किसी भी Flexbox प्रश्न के शीर्ष परिणामों में है और दर्जनों भाषाओं में अनुवादित है। यह Flexbox अपनाने में नाटकीय रूप से तेज़ी लाता है।
• CSS Grid पूरक के रूप में आता है, 2017।CSS Grid Layout Chrome 57, Firefox 52, और Safari 10.1 (मार्च 2017) में जारी होता है। Flexbox को बदलने से बहुत दूर, Grid इसका पूरक है: Flexbox एक-आयामी पंक्ति/स्तंभ लेआउट में उत्कृष्ट है, Grid दो-आयामी लेआउट में उत्कृष्ट है। आधुनिक डिज़ाइन आमतौर पर दोनों उपयोग करते हैं: पृष्ठ-स्तरीय संरचना के लिए Grid, घटक-आंतरिक व्यवस्थाओं (nav items, button groups, card सामग्री) के लिए Flexbox।
• gap गुण और subgrid आते हैं, 2020 से 2024।gap गुण (मूल रूप से केवल-Grid) Safari 14.1 (अप्रैल 2021) तक सभी प्रमुख ब्राउज़रों में Flexbox-संगत हो जाता है। साफ़ gap: 1rem syntax पुराने «अंतिम को छोड़कर हर child पर margin» पैटर्न को बदलती है। CSS Subgrid (2023+) nested grids को parent grid tracks के साथ संरेखित होने देता है, घटक-सिस्टम लेआउट के लिए उपयोगी।

Praayogik workflows

• नेविगेशन बार।बाईं ओर logo और दाईं ओर links के साथ एक क्षैतिज nav कैनोनिकल Flexbox उपयोग केस है। nav कंटेनर पर display: flex; justify-content: space-between; align-items: center;, और हो गया। links के बीच रिक्ति के लिए gap: 1.5rem जोड़ें। यह 4-पंक्ति CSS उसे बदलती है जिसके लिए पहले floats, clearfix, और pixel-perfect margin गणित चाहिए थी।
• लंबवत और क्षैतिज केंद्रीकरण।क्लासिक «मैं इस div को कैसे केंद्रित करूँ?» प्रश्न का Flexbox उत्तर है: parent पर display: flex; justify-content: center; align-items: center;। child के आंतरिक आकार की परवाह किए बिना, parent की ऊँचाई की परवाह किए बिना, गतिशील सामग्री परिवर्तनों की परवाह किए बिना काम करता है। यह सबसे बड़ा गुणवत्ता-जीवन सुधार है जो Flexbox ने वेब डेवलपमेंट को लाया।
• wrapping के साथ कार्ड-सूची लेआउट।कार्डों की एक पंक्ति जो संकीर्ण स्क्रीन पर कई पंक्तियों में टूटती है: कंटेनर पर display: flex; flex-wrap: wrap; gap: 1rem;, और प्रत्येक कार्ड पर flex: 1 1 250px। कार्ड उपलब्ध स्थान भरने के लिए बढ़ते हैं, 250px न्यूनतम तक सिकुड़ते हैं, और जब 250px फिट नहीं होते तो नई पंक्तियों में wrap होते हैं। media queries के बिना responsive डिज़ाइन।
• लेबल किए गए inputs के साथ फ़ॉर्म पंक्तियाँ।फ़ॉर्मों को अक्सर लेबल और inputs संरेखित करने की आवश्यकता होती है: पंक्ति पर display: flex; gap: 0.5rem;, लेबल पर flex: 0 0 120px (निश्चित 120px चौड़ाई), input पर flex: 1 (शेष स्थान भरता है)। फ़ॉर्म कंटेनर का आकार बदलना लेबल को स्थिर रखता है और input को खींचता है। दो-स्तंभ फ़ॉर्म पंक्तियों के लिए CSS Grid से आसान।
• Sticky footers।जब सामग्री छोटी हो तो footer को viewport के नीचे चिपकाना, लेकिन जब लंबी हो तो सामग्री का अनुसरण करना: body { display: flex; flex-direction: column; min-height: 100vh; } के साथ main { flex: 1 } footer को नीचे धकेलता है। क्लासिक «sticky footer» समस्या तीन CSS घोषणाओं में हल, 2010 के दशक के नकारात्मक-margin workarounds की जगह।
• Tag और badge समूह।tags, chips, या badges की सूचियाँ जो क्षैतिज रूप से बहनी चाहिए और नई पंक्तियों में wrap होनी चाहिए: display: flex; flex-wrap: wrap; gap: 0.5rem;। प्रत्येक tag स्वयं का आकार बनाता है, और कंटेनर व्यवस्था संभालता है। filtering UIs, content tagging, search interfaces में भारी रूप से उपयोग किया जाता है। state-निर्भर styling के लिए :has() selector के साथ अच्छी तरह संयोजित होता है।

Aam khataarey

• min-width: auto जाल।Flex items में एक अंतर्निहित min-width: auto (या स्तंभ दिशाओं के लिए min-height: auto) होता है जो उन्हें उनकी सामग्री के आंतरिक न्यूनतम आकार से नीचे सिकुड़ने से रोकता है। यह flex कंटेनरों के अंदर overflow: hidden और text-truncation पैटर्न को अप्रत्याशित रूप से विफल कर देता है। फ़िक्स: समस्याग्रस्त flex आइटम पर स्पष्ट रूप से min-width: 0 सेट करें। यह सबसे आम «मेरा flex लेआउट क्यों टूटा है?» का कारण है।
• flex-basis बनाम width भ्रम।flex-basis grow/shrink गणनाओं से पहले, मुख्य अक्ष के साथ flex आइटम का प्रारंभिक आकार है। width (या स्तंभ दिशाओं के लिए height) नियमित CSS आकार है। जब दोनों सेट हों, flex-basis जीतता है। शॉर्टहैंड flex: 1 1 200px flex-basis को 200px पर सेट करता है। अधिकांश मामलों के लिए, स्पष्टता हेतु flex कंटेनरों के अंदर width के बजाय flex-basis को प्राथमिकता दें।
• पुराने ब्राउज़रों में gap समर्थन।gap गुण मूल रूप से केवल-Grid था और हाल ही में Flexbox में आया: Safari 14.1 (अप्रैल 2021), और Chrome/Firefox में पहले। पुराने Safari (या iOS apps में पुराने WebView) का समर्थन करने वाली परियोजनाओं के लिए, बच्चों पर margins का उपयोग करते हुए fallbacks प्रदान करें। अधिकांश आधुनिक परियोजनाएँ सुरक्षित रूप से gap का उपयोग कर सकती हैं; अपने विशिष्ट ब्राउज़र समर्थन लक्ष्यों की जाँच करें।
• डिफ़ॉल्ट flex-shrink अप्रत्याशित आकार उत्पन्न कर सकता है।Flex items डिफ़ॉल्ट रूप से flex-shrink: 1 पर हैं, जिसका अर्थ है यदि कंटेनर बहुत संकीर्ण है तो वे अपनी घोषित चौड़ाई से नीचे सिकुड़ सकते हैं। उपलब्ध स्थान की परवाह किए बिना तत्व को उसकी घोषित चौड़ाई पर रखने के लिए, flex-shrink: 0 सेट करें। sidebars के साथ आम जो 250px चौड़े रहने चाहिए भले ही मुख्य सामग्री क्षेत्र उन्हें धकेले: flex-basis: 250px के बजाय flex: 0 0 250px।
• प्रतिशत flex-basis कंटेनर के सापेक्ष है।flex-basis: 50% का अर्थ है «flex कंटेनर के मुख्य-अक्ष आकार का 50%»। यह विशिष्ट लेआउट के लिए काम करता है लेकिन flex-wrap के साथ अजीब रूप से इंटरैक्ट करता है: यदि कंटेनर स्वयं एक nested flex संदर्भ में प्रतिशत-आधारित मुख्य-अक्ष आकार रखता है, तो गणित जटिल हो जाती है। संदेह होने पर, प्रतिशतों के बजाय flex-basis के लिए pixel मानों या min()/max()/clamp() का उपयोग करें।
• IE 11 Flexbox में buggy edge cases हैं।Internet Explorer 11 (जून 2022 में सेवानिवृत्त) ने Flexbox को कई बग के साथ लागू किया: min-height का सम्मान नहीं, टूटे हुए nested flex कंटेनर, flex: 1 कभी-कभी flex-basis को 0% के बजाय 0px मानता है, «two-value flex» शॉर्टहैंड असंगत रूप से संभाला गया। अब IE का समर्थन न करने वाली परियोजनाओं के लिए, अनदेखा करें। विरासत एंटरप्राइज़ सॉफ़्टवेयर के लिए, अच्छी तरह से परीक्षण करें या वैकल्पिक लेआउट दृष्टिकोणों का उपयोग करें।

Gopniyata aur data handling

CSS सीखने और लेआउट उपकरण दो स्वादों में आते हैं: सरल HTML पृष्ठ जो क्लाइंट-साइड JavaScript चलाते हैं (निजी, तेज़, कोई setup नहीं) और सहेजी गई परियोजनाओं के साथ क्लाउड संपादक (सहयोगी लेकिन गोपनीयता समझौतों के साथ)। यह उपकरण पहले प्रकार का है। आपकी गुण चयन, आपकी आइटम कॉन्फ़िगरेशन, आपका उत्पन्न CSS: सब आपके ब्राउज़र सत्र में रहते हैं। पृष्ठ ताज़ा करें और स्थिति चली गई, जब तक कि आपने पहले CSS कॉपी न किया हो।

यहाँ गोपनीयता दांव कम हैं क्योंकि Flexbox कॉन्फ़िगरेशन में शायद ही कभी संवेदनशील जानकारी होती है। फिर भी, analytics की कमी मायने रखती है: आप स्वतंत्र रूप से प्रयोग कर सकते हैं बिना आपकी trial-and-error प्रक्रिया रिकॉर्ड हुए। विशेष रूप से कक्षा या कॉर्पोरेट प्रशिक्षण सेटिंग्स में उपयोगी जहाँ छात्रों या प्रशिक्षुओं को तृतीय-पक्ष प्लेटफ़ॉर्म पर खाते पंजीकृत करने को कहना घर्षण बिंदु है। उपकरण कोई backend के बिना एकल स्थिर पृष्ठ है, किसी भी ब्राउज़र में प्रयोग योग्य, यहाँ तक कि लॉक-डाउन एंटरप्राइज़ मशीनों पर भी।

Flexbox कब उपयोग नहीं करना चाहिए

• दो-आयामी लेआउट के लिए CSS Grid।Flexbox एक-आयामी है; यदि आपको आइटम को पंक्तियों और स्तंभों दोनों में एक साथ संरेखित करने की आवश्यकता है (जैसे, मिश्रित-आकार कार्डों के साथ एक पत्रिका-शैली लेआउट), CSS Grid नाटकीय रूप से बेहतर अनुकूल है। उस तरह के काम के लिए हमारे CSS Grid Generator का उपयोग करें। दोनों एक साथ बहुत अच्छे से काम करते हैं: पृष्ठ-स्तरीय संरचना के लिए Grid, घटक-आंतरिक व्यवस्थाओं के लिए Flexbox।
• तालिकाबद्ध डेटा के लिए HTML तालिकाएँ।यदि आपका डेटा वास्तव में एक तालिका है (पंक्तियाँ रिकॉर्ड का प्रतिनिधित्व करती हैं, स्तंभ फ़ील्ड्स का), और के साथ एक वास्तविक तत्व का उपयोग करें। तालिकाएँ screen readers को semantic अर्थ, sortable headers, और अंतर्निर्मित संरेखण प्रदान करती हैं। तालिकाओं के लिए Flexbox/Grid 2010-युग का antipattern है; आधुनिक सुलभता दिशानिर्देश स्पष्ट रूप से तालिकाबद्ध डेटा के लिए semantic HTML तालिकाओं की सिफारिश करते हैं।
  overlays और tooltips के लिए position: absolute।Modal overlays, tooltips, dropdown menus, और इसी तरह के तैरते UI तत्व Flexbox के बजाय position: absolute या position: fixed के साथ सबसे अच्छा काम करते हैं। Flex/Grid लेआउट प्रवाह का प्रबंधन करते हैं; absolute positioning तत्वों को पूरी तरह प्रवाह से बाहर निकालती है। उन्हें संयोजित करें: मुख्य पृष्ठ लेआउट के लिए Flexbox, उस पर overlay करने वाले modal के लिए absolute positioning।
  nested संरेखण के लिए CSS Subgrid।जब nested लेआउट को parent के grid के साथ संरेखित करने की आवश्यकता हो (जैसे, कार्ड titles सभी एक कार्ड grid में संरेखित होते हुए), CSS Subgrid (Firefox 71 2019, Chrome 117 2023, Safari 16 2022) nested Flexbox से अधिक उपयुक्त है। Subgrid children को parent से grid tracks विरासत में लेने देता है, nested संरचनाओं में पूर्ण संरेखण सुनिश्चित करता है। डिज़ाइन-सिस्टम घटक कार्य के लिए सीखने योग्य।

  Aur sawaal

  flex shorthand का वास्तव में क्या अर्थ है?

  flex shorthand तीन गुण एक साथ सेट करता है: flex: । सामान्य मान: समान-वितरण आइटम के लिए flex: 1 (1, 1, 0%), निश्चित-आकार आइटम के लिए flex: 0 0 auto, 250px प्रारंभिक बिंदु से grow/shrink करने वाले आइटम के लिए flex: 1 1 250px। shorthand के विशेष प्रारंभिक मान हैं जब केवल एक या दो मान प्रदान किए जाते हैं; स्पष्ट तीन-मान रूप आश्चर्य से बचता है।

  मैं आइटम्स को कई पंक्तियों में wrap कैसे करूँ?

  कंटेनर पर flex-wrap: wrap सेट करें। जब आइटम फिट नहीं होते तो नई पंक्ति में overflow होते हैं। प्रति पंक्ति कितने फिट होते हैं इसे नियंत्रित करने के लिए आइटम पर flex-basis के साथ संयोजित करें: flex: 1 1 200px एक responsive grid बनाता है जहाँ आइटम कम-से-कम 200px हैं, शेष स्थान भरने के लिए बढ़ते हैं, और संकीर्ण स्क्रीन पर नई पंक्तियों में wrap होते हैं। कंटेनर gap गुण wrap की गई पंक्तियों और आइटम के बीच रिक्ति संभालता है।

  क्या मैं flex items का क्रम उल्टा कर सकता हूँ?

  हाँ, कई तरीके। कंटेनर-स्तर: flex-direction: row-reverse (या column-reverse) सभी आइटम का क्रम उलट देता है। आइटम-स्तर: order गुण numerical weights असाइन करता है; कम संख्या वाले आइटम पहले दिखाई देते हैं। डिफ़ॉल्ट order 0 है; एक आइटम पर order: -1 सेट करना उसे सामने ले जाता है। सुलभता नोट: दृश्य पुनर्क्रमण tab order या screen-reader पढ़ने के क्रम को प्रभावित नहीं करता, जो कीबोर्ड और सहायक-तकनीक उपयोगकर्ताओं को भ्रमित कर सकता है। संयम से उपयोग करें।

  align-items और align-content में क्या अंतर है?

  align-items आइटम को क्रॉस अक्ष के साथ उनकी पंक्ति (या स्तंभ) के भीतर संरेखित करता है। align-content कंटेनर के भीतर पंक्तियों (या स्तंभों) को स्वयं संरेखित करता है, केवल तभी सार्थक जब कई wrapped lines हों। यदि flex-wrap nowrap (डिफ़ॉल्ट) पर सेट है, align-content का कोई प्रभाव नहीं है क्योंकि केवल एक पंक्ति है। एकल-पंक्ति संरेखण के लिए align-items का उपयोग करें, बहु-पंक्ति संरेखण के लिए align-content का।

  मैं Flexbox के साथ एकल तत्व को कैसे केंद्रित करूँ?

  क्लासिक उत्तर: parent कंटेनर पर display: flex; justify-content: center; align-items: center;। यह child को क्षैतिज और लंबवत दोनों रूप से केंद्रित करता है। केवल क्षैतिज के लिए: केवल justify-content: center उपयोग करें। केवल लंबवत के लिए: केवल align-items: center उपयोग करें। यदि आपको अज्ञात ऊँचाई के parent के अंदर केंद्रित करने की आवश्यकता है, parent में min-height: 100vh जोड़ें ताकि उसके भीतर केंद्रित करने के लिए लंबवत स्थान हो। पूरा पैटर्न 20 वर्षों के CSS केंद्रीकरण workarounds की जगह लेता है।

  मेरा text truncation flex कंटेनर में काम क्यों नहीं करता?

  flex items पर min-width: auto डिफ़ॉल्ट के कारण। Text-overflow: ellipsis के लिए तत्व को वास्तव में अपने कंटेनर को overflow करने की आवश्यकता है; डिफ़ॉल्ट न्यूनतम चौड़ाई सामग्री के आंतरिक आकार पर सेट होने के साथ, तत्व कभी overflow नहीं होता। फ़िक्स: truncate होने वाले text वाले flex आइटम पर min-width: 0 जोड़ें। यह अब तक का सबसे आम Flexbox बग Stack Overflow उत्तर है: «flex text-overflow ellipsis not working» खोजने पर इस सटीक उत्तर के हजारों संस्करण मिलते हैं।

  संबंधित टूल

  🎨

  CSS ग्रेडिएंट

  🖼️

  Box-shadow

  ⬜

  Border-radius

  📐

  CSS इकाइयाँ