फ्लेक्स-आइटम के लिए 'प्रदर्शन' संपत्ति के मूल्यों की अनुमति क्या है? (फ्लेक्स-आइटम के बच्चों का लेआउट अप्रासंगिक है)

Question

एक फ्लेक्स कंटेनर के सभी बच्चे (display: flex या display: inline-flex द्वारा नामित) स्वचालित रूप से फ्लेक्स आइटम बनाये जाते हैं। फ्लेक्स आइटम के लिए कोई डिस्प्ले प्रॉपर्टी नहीं है; इसके बजाय, हम इसे किसी अन्य मूल्य पर सेट करते हैं कि हम कैसे फ्लेक्स आइटम के बच्चों को निर्धारित करना चाहते हैं।

तो, यदि मैं वाई तत्व पर एक्स मान पर display सेट करता हूं (ध्यान में रखते हुए कि वाई फ्लेक्स संदर्भ में भाग लेता है, तो यह वाई एक फ्लेक्स-आइटम है) क्या मुझे यकीन है कि मुझे हमेशा फ्लेक्स- आइटम जो व्यवहार करता है (इस स्वरूपण संदर्भ में, फ्लेक्स कंटेनर में) ब्लॉक-स्तर तत्व की तरह?

(दूसरे शब्दों में, वाई की परवाह किए बिना एक ब्लॉक स्वरूपण संदर्भ में भाग लेता है कि क्या एक्स = ब्लॉक/इनलाइन/तालिका सेल/इनलाइन ग्रिड/... आदि, है ना?)

• एक्स - गैर ब्लॉक मूल्य
• Y - फ्लेक्स-आइटम, एचटीएमएल तत्व

यह:

<div id="flex-container" style="display:flex"> 
    <div id="flex-item" style="display: inline;">item</div> 
</div> 

इस के बराबर है (किसी भी पक्ष प्रभाव के बिना)

<div id="flex-container" style="display:flex"> 
    <div id="flex-item" style="display: block;">item</div> 
</div> 

Answer 1

एक flex item होने के लिए केवल हालत एक फ्लेक्स कंटेनर का इन-प्रवाह बच्चे की जा रही है।

नोट इसका मतलब पाठ का एक सन्निहित रन एक गुमनाम फ्लेक्स आइटम जो किसी भी तत्व के अनुरूप नहीं है अंदर लिपटे जा सकता है, और एक फ्लेक्स कंटेनर का एक तत्व बच्चे को एक फ्लेक्स आइटम नहीं हो सकता है यदि निम्न

के किसी भी

• यह absolutely positioned

  एक फ्लेक्स कंटेनर फ्लेक्स लेआउट में भाग नहीं लेता की एक बिल्कुल-तैनात बच्चा है।

• यह display: contents

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

  इसके बच्चे इसके बजाय फ्लेक्स आइटम बन जाएंगे (जब तक कि इस सूची में से कुछ उन पर लागू नहीं होता)।

• यह display: none

  तत्व है और उसके वंश कोई बॉक्स उत्पन्न करता है।

• यह box-suppress: discard

  तत्व सभी में कोई बॉक्स उत्पन्न करता है।

• यह box-suppress: hide

  तत्व के रूप में सामान्य बक्से उत्पन्न करता है, लेकिन उन बक्से किसी भी तरह से लेआउट में भाग नहीं करते हैं, और प्रदर्शित नहीं किया जाना चाहिए।

• इससे पहले, अगर एक फ्लेक्स कंटेनर के एक बच्चे को एक display मूल्य है कि एक गुमनाम माता पिता उत्पन्न किया था, कि माता-पिता बच्चे के बजाय फ्लेक्स आइटम बन गया। यह बदल गया और अब बच्चा फ्लेक्स आइटम बन गया है, और कोई माता-पिता उत्पन्न नहीं हुआ है। कि से

अलावा, हाँ, display मूल्य एक तत्व एक फ्लेक्स आइटम होने से रोक नहीं होनी चाहिए।

पता है कि फ्लेक्स आइटम blockified कर रहे हैं, तो उदाहरण के लिए inline-blockblock हो जाता हो, inline-tabletable हो जाता है, inline-flexflex हो जाता है, आदि

इसका मतलब है कि, जो कुछ भी निर्दिष्ट outer display role, फ्लेक्स आइटम हमेशा block- हो जाएगा स्तर।

मूल रूप से, display संपत्ति, जब एक फ्लेक्स आइटम पर उपयोग की जाती है, तो केवल inner display layout model सेट करने के लिए उपयोगी होती है, उदा। कि आप फ्लेक्स आइटम अपनी सामग्री के लिए एक फ्लेक्स कंटेनर होना चाहते हैं।

एक flex item अपने सामग्री के लिए एक नया स्वरूपण संदर्भ स्थापित करता है। इस स्वरूपण संदर्भ का प्रकार सामान्य रूप से display मान द्वारा निर्धारित किया जाता है। हालांकि, फ्लेक्स आइटम खुद को फ्लेक्स स्तरीय बक्से हैं, नहीं ब्लॉक स्तर के बक्से: वे अपने कंटेनर की फ्लेक्स स्वरूपण संदर्भ में भाग लेने के एक ब्लॉक संदर्भ स्वरूपण में नहीं।

(शब्दावली थोड़ा अलग है, प्रदर्शन कल्पना का कहना है एक फ्लेक्स आइटम इसकी बाहरी प्रदर्शन भूमिका के अर्थ में ब्लॉक स्तर, flexbox कल्पना कहना है कि वह ब्लॉक स्तर के नहीं है अर्थ में है कि में स्वरूपण संदर्भ जो इसमें भाग लेता है वह एक ब्लॉक नहीं है)