फ्लेक्स कंटेनर क्यों नहीं हो सकते?

Question

मैंने एक fieldsetतत्व के साथ स्टाइल करने की कोशिश की display: flexऔर display: inline-flex।

हालाँकि, यह काम नहीं किया: flexव्यवहार की तरह block, और inline-flexव्यवहार की तरह inline-block।

यह फ़ायरफ़ॉक्स और क्रोम दोनों पर होता है, लेकिन अजीब तरह से यह IE पर काम करता है।

यह एक बग है? मुझे पता नहीं चल सका कि fieldsetकोई विशेष व्यवहार नहीं होना चाहिए, न तो HTML5 में और न ही सीएसएस फ्लेक्सिबल बॉक्स लेआउट स्पेक्स में।

fieldset, div {
    display: flex;
    border: 1px solid;
}

<fieldset>
    <p>foo</p>
    <p>bar</p>
</fieldset>
<div>
    <p>foo</p>
    <p>bar</p>
</div>

Comments

हाँ, यह एक बग है। सरल फिक्स: एक अन्य तत्व का उपयोग करें। code.google.com/p/chromium/issues/detail?id=262679

— एडम

इसी तरह का मुद्दा: फ्लेक्सबॉक्स कुछ ब्राउज़रों में <बटन> तत्व पर काम नहीं कर रहा है

— ओरोल

Answer 1

बग 984869 बग केdisplay: flex अनुसार - बटन तत्वों के लिए काम नहीं करता है ,

<button>शुद्ध सीएसएस में लागू नहीं किया जा सकता (ब्राउज़रों द्वारा), इसलिए वे सीएसएस के दृष्टिकोण से एक ब्लैक बॉक्स के एक बिट हैं। इसका मतलब यह है कि वे आवश्यक रूप से उसी तरह से प्रतिक्रिया नहीं करते हैं जैसे कि एक <div>।

यह फ्लेक्सबॉक्स के लिए विशिष्ट नहीं है - उदाहरण के लिए, यदि आप overflow:scrollएक बटन पर रखते हैं तो हम स्क्रॉलबार को प्रस्तुत नहीं करते हैं , और यदि आप display:tableइसे डालते हैं तो हम इसे तालिका के रूप में प्रस्तुत नहीं करते हैं ।

और भी आगे बढ़ना, यह विशिष्ट नहीं है <button>। विचार करें <fieldset> तथा <table> जिसका विशेष प्रतिपादन व्यवहार भी है:

data:text/html,<fieldset style="display:flex"><div>abc</div><div>def</div>

इन मामलों में, Chrome हमारे साथ सहमत है और flex प्रदर्शन मोड की उपेक्षा करता है। (जैसा कि इस तथ्य से पता चला है कि "एबीसी" और "डीईएफ़" अंत तक खड़ी खड़ी हो रही है)। तथ्य यह है कि वे वही करते हैं जो आप उम्मीद कर रहे हैं <button style="display:flex">कि संभवतः एक कार्यान्वयन विवरण के कारण हो सकता है।

गेको के बटन कार्यान्वयन में, हम हार्डकोड करते हैं <button>(और <fieldset>,तथा <table>) displayसंपत्ति की परवाह किए बिना, एक विशिष्ट फ्रेम वर्ग (और इसलिए, बाल तत्वों को बिछाने का एक विशिष्ट तरीका) होने के नाते ।

यदि आप मज़बूती से बच्चों को क्रॉस-ब्राउज़र फ़ैशन में किसी विशेष लेआउट मोड में व्यवस्थित करना चाहते हैं, तो आपकी सबसे अच्छी शर्त बटन के अंदर एक आवरण-div का उपयोग करना है, जिस तरह आपको अंदर करने की आवश्यकता होगी a <table>याa <fieldset>।

इसलिए, उस बग को "हल किए गए अमान्य" के रूप में चिह्नित किया गया था।

बग 1047590display: flex;<fieldset> भी है - वर्तमान में "अपुष्ट" में काम नहीं करता है ।

---

अच्छी खबर : फ़ायरफ़ॉक्स 46+ के लिए फ्लेक्सबॉक्स लागू करता है <fieldset>। बग 1230207 देखें ।

Comments

फ्लेक्सबॉक्स को ध्यान में रखते हुए 8 साल से सीमित है, मुझे लगता है कि "उल्लेखनीय" एक ओवरस्टेटमेंट का एक सा है। अगर कुछ भी, मुझे आश्चर्य है कि वे इसे इतनी जल्दी फ़ायरफ़ॉक्स में काम कर रहे हैं। हो सकता है कि आप Google पर गियर में चीजों को किक करने में मदद करना चाहें (हे, इसे प्राप्त करें ?)।

— BoltClock

<button> is not implementable (by browsers) in pure CSS- यह सिर्फ गलत है। एक ब्राउज़र किसी <button>भी तरह से लागू करने के लिए स्वतंत्र है , जो वे चाहते हैं, वे सिस्टम अनुबंध पुस्तकालयों या जो भी उपयोग करते हुए इसे प्रस्तुत करने के लिए "अनुबंधित बाध्य" नहीं हैं, जो कि सीएसएस या अन्य कस्टम व्यवहारों के साथ इनकी शैली करने की क्षमता बिगड़ा है। वही किसी अन्य तत्व के लिए जाता है, वास्तव में।

— अमन

@BoltClock आप लिम्बो से क्या मतलब है यकीन नहीं है। सभी प्रमुख ब्राउज़र 2015 से वाक्य रचना के तीसरे और अंतिम संशोधन का समर्थन करते हैं; मुझे लगता है कि बहुत अच्छी है। हमें अब ग्रिड के लिए भी व्यापक समर्थन मिला! 🎉

— Šime Vidas

@ It's समय विद: मैं देखता हूं, ऐसा लगता है कि यह एक साल के लिए अब सीआर हो गया है। काफी उचित। मुझे लगा कि यह कभी नहीं बनने वाला था।

— BoltClock

2017 वास्तव में। मैं अपनी नाराज़गी कहाँ से बताऊँ? फ्लेक्सबॉक्स, अनगिनत लेखों, ट्यूट्स, ट्रायल / एरर्स को सुरक्षित रूप से लागू करने के इंतजार के वर्षों में, मुझे वहां 98% और ... फ़ील्ड्स मिलते हैं। यह मेरे घर को तार करने के लिए एक इलेक्ट्रीशियन की तरह है, केवल यह खोजने के लिए कि एक पावर जैक पृथ्वी पर नहीं है। "अतिशयोक्ति न करें" मुझे लगता है कि लोगों को लगता है, अतिशयोक्ति नहीं है। मुझे सचमुच इस कल के लिए जवाब देना है। फ्लेक्स कई विरासत तालिका बग का जवाब था जिन्हें मुझे हल करने की आवश्यकता थी। फ्लेक्स अब नॉन-लीगेसी बग्स की एक छोटी मुट्ठी का कारण है। मैं अपनी नाराज़गी कहाँ से बताऊँ?

— danjah

Answer 2

मुझे पता यह Chrome और Firefox जहां पर एक बग हो सकता है legendऔर fieldsetकर रहे हैं तत्वों की जगह ।

बग रिपोर्ट की गई:

बग क्रोम (अभी भी खुला)
बग फ़ायरफ़ॉक्स (v46 के बाद से तय)

एक संभावित समाधान:

<div role="group">HTML में एक संभावित वर्कअराउंड का उपयोग किया जाएगा , और div[role='group']चयनकर्ता के रूप में सीएसएस में आवेदन किया जाएगा ।

---

अपडेट करें

में क्रोम संस्करण 83 button के साथ काम कर सकते हैं display: inline-grid/grid/inline-flex/flex, तो आप नीचे डेमो देख सकते हैं:

button {
  display: inline-flex;
  height: 2rem;
  align-items: flex-end;
  width: 4rem;
  -webkit-appearance: none;
  justify-content: flex-end;
}

<!-- 

The align-items keyword should fail in Chrome 81 or earlier, but work in Chrome 83 or later. To see the error, the button needs styles that make it more of an extrinsic container. In other words, it needs a height or width set. 
 
-->
<button>Hi</button>
<input type="button" value="Hi">

Answer 3

बग प्राथमिकता बढ़ाने के लिए कृपया Chrome बग को स्‍टार करें

यह क्रोम में एक बग है। कृपया इस मुद्दे को बढ़ाने के लिए इसे जोड़ने के लिए एक स्टार जोड़ें, इसे तय किया जाना चाहिए: https://bugs.chromium.org/p/chromium/issues/detail?id=375693

इस समय के दौरान, मैंने इन तीन कोड पेन उदाहरणों को बनाया ताकि यह दिखाया जा सके कि मुद्दे के आसपास कैसे काम किया जाए। वे उदाहरणों के लिए CSS ग्रिड का उपयोग करके बनाए गए हैं लेकिन फ्लेक्सबॉक्स के लिए समान तकनीकों का उपयोग किया जा सकता है।

किंवदंती के बजाय aria-labelledby का उपयोग करना

यह समस्या से निपटने के लिए अधिक स्पष्ट तरीका है। नकारात्मक पक्ष यह है कि आपको हर नकली किंवदंती तत्व पर लागू अद्वितीय आईडी बनाने से निपटना होगा।

https://codepen.io/daniel-tonon/pen/vaaGzZ

<style>
.flex-container {
    display: flex;
}
</style>

<fieldset aria-labelledby="fake-legend">
    <div class="flex-container">
        <div class="flex-child" id="fake-legend">
            I am as good accessibilty wise as a real legend
        </div>

        ...

    </div>
</fieldset>

क्षेत्र और किंवदंती के बजाय भूमिका = "समूह" और aria-labelledby का उपयोग करना

यदि आपको एक सहोदर तत्व की ऊंचाई तक खिंचाव करने में सक्षम होने के लिए फ्लेक्स-कंटेनर की आवश्यकता है और फिर उस खिंचाव को अपने बच्चों पर से गुजरना है, तो आपको role="group"इसके बजाय उपयोग करने की आवश्यकता होगी<fieldset>

https://codepen.io/daniel-tonon/pen/BayRjGz

<style>
.flex-container {
    display: flex;
}
</style>

<div role="group" class="flex-container" aria-labelledby="fake-legend">
    <div class="flex-child" id="fake-legend">
        I am as good accessibilty wise as a real legend
    </div>

    ...

</div>

स्टाइल के प्रयोजनों के लिए एक नकली डुप्लिकेट किंवदंती बनाना

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

https://codepen.io/daniel-tonon/pen/zLLqjY

<style>
.screen-reader-only {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.flex-container {
    display: flex;
}
</style>

<fieldset>
    <legend class="screen-reader-only">
        I am a real screen-reader accessible legend element
    </legend>

    <div class="flex-container">
        <div class="flex-child" aria-hidden="true">
            I am a fake legend purely for styling purposes
        </div>

        ...

    </div>
</fieldset>

किंवदंती एक प्रत्यक्ष निर्णायक होना चाहिए

जब आप पहली बार खुद को ठीक करने की कोशिश कर रहे हैं, तो आप शायद ऐसा करने की कोशिश करेंगे:

<!-- DO NOT DO THIS! -->
<fieldset>
    <div class="flex-container">
        <legend class="flex-child">
            Broken semantics legend text
        </legend>

        ...

    </div>
</fieldset>

आपको पता चलेगा कि यह काम करता है, और फिर आप शायद इसे दूसरा विचार दिए बिना आगे बढ़ेंगे।

समस्या यह है कि फील्डसेट और किंवदंती के बीच एक दिव्य आवरण डालने से दोनों तत्वों के बीच संबंध टूट जाता है। यह फ़ील्डसेट / किंवदंती के शब्दार्थ को तोड़ता है।

तो ऐसा करके, आपने पहली जगह में फ़ील्डसेट / किंवदंती का उपयोग करने के पूरे उद्देश्य को हरा दिया है।

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

Answer 4

अपने अनुभव में, मैंने पाया है कि न तो <fieldset>, न ही <button>, और न ही <textarea>ठीक से display:flexया विरासत में मिली संपत्तियों का उपयोग कर सकता है ।

जैसा कि दूसरों ने पहले ही उल्लेख किया है, बग की सूचना दी गई है। यदि आप ऑर्डरिंग (जैसे order:2) को नियंत्रित करने के लिए फ्लेक्सबॉक्स का उपयोग करना चाहते हैं , तो आपको एक div में तत्व को लपेटने की आवश्यकता होगी। यदि आप वास्तविक लेआउट और आयामों को नियंत्रित करने के लिए फ्लेक्सबॉक्स चाहते हैं, तो आप इनपुट नियंत्रण (जो बदबू आ रही है, मुझे पता है) के बजाय एक डिव का उपयोग करने पर विचार कर सकते हैं।

Answer 5

<div role="group">
    <p>foo</p>
    <p>bar</p>
</div>
<div>
    <p>foo</p>
    <p>bar</p>
</div>

भूमिका समूह का उपयोग करने की आवश्यकता हो सकती है क्योंकि फ़ायरफ़ॉक्स, क्रोम और मुझे लगता है कि सफारी में बगेट्स के साथ जाहिरा तौर पर एक बग है। तब CSS में चयनकर्ता बस होगा

div[role='group'], div {
    display: flex;
    border: 1px solid;
}

संपादित करें: यहां कुछ मुद्दे हैं जो अन्य लोग भी अनुभव कर रहे हैं।

अंक 375693

अंक 262679

Comments

यह अभी भी क्रोम 60. में एक मुद्दा है

— evolutionxbox

क्रोम 66 में अभी भी यहाँ है।

— ब्राड

Chrome 72 में चेकिंग।

— danemacmillan

क्रोम 73 की जाँच

— माइकल ड्रेपर

क्रोम 75 चेकिंग

— xaddict

Answer 6

आप <fieldset>निम्नलिखित सहारा के साथ अतिरिक्त div डाल सकते हैं :

flex-inner-wrapper {
  display: inherit;
  flex-flow: inherit;
  justify-content: inherit;
  align-items: inherit;
}

Comments

मुझे समझ में नहीं आता है। यह वास्तव में सही है। लेकिन याद रखें कि <legend>तत्व (यदि प्रयोग किया जाता) के शीर्ष स्तर में <fieldset>के रूप में इरादा तत्व इसके उपयोग रखने के लिए ( Permitted content: An optional <legend> element, followed by flow content.- देख developer.mozilla.org/en-US/docs/Web/HTML/Element/... )

— Froxx

यह मैं नहीं था, लेकिन मुझे लगता है कि सवाल का जवाब नहीं देने के साथ नीचे कुछ करना चाहिए। यह वर्कअराउंड खोजने के बारे में नहीं था, लेकिन fieldsetस्वयं का व्यवहार था।

— मन्नजो

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

— एरिक एस। बुलिंग्टन

डाउन वोट दिया क्योंकि यह <legend>तत्व के शब्दार्थ को तोड़ने के लिए प्रोत्साहित करता है। यह पहली जगह में फ़ील्डसेट / किंवदंती का उपयोग करने के उद्देश्य को पराजित करता है। मेरा जवाब यहाँ देखें: stackoverflow.com/a/59425373/1611058

— डैनियल टोनन

Answer 7

मूल प्रश्न का उत्तर देने के लिए: हाँ, यह एक बग है, लेकिन सवाल पूछे जाने के समय इसे अच्छी तरह से परिभाषित नहीं किया गया था।

अब फ़ील्डसेट के लिए प्रतिपादन बेहतर परिभाषित किया गया है: https://html.spec.whatwg.org/multipage/rendering.html#the-fieldset-and-legend-elements

फ़ायरफ़ॉक्स और सफारी में, flexboxपर fieldsetअब काम करता है। यह अभी तक क्रोमियम में नहीं है। ( Https://bugs.chromium.org/p/chromium/issues/detail?id=375693 देखें )

इसके अलावा 2018 में विनिर्देश में किए गए सुधारों के लिए https://blog.whatwg.org/the-state-of-fieldset-interoperability देखें ।