डिस्प्ले के बीच अंतर क्या है: इनलाइन-फ्लेक्स और डिस्प्ले: फ्लेक्स?

331

मैं एक आईडी आवरण के भीतर तत्वों को लंबवत रूप से संरेखित करने का प्रयास कर रहा हूं। मैंने display:inline-flex;इस आईडी को संपत्ति दी क्योंकि आईडी रैपर फ्लेक्स कंटेनर है।

लेकिन प्रस्तुति में कोई अंतर नहीं है। मुझे उम्मीद थी कि रैपर आईडी में सब कुछ प्रदर्शित होगा inline। क्यों नहीं है?

#wrapper {
    display: inline-flex;
    /*no difference to display:flex; */
}

<body>
    <div id="wrapper">
        <header>header</header>
        <nav>nav</nav>
        <aside>aside</aside>
        <main>main</main>
        <footer>footer</footer>
    </div>
</body>

स्निपेट का विस्तार करें

css flexbox

— astridx
स्रोत

407

display: inline-flexफ्लेक्स आइटम डिस्प्ले इनलाइन नहीं बनाता है । यह फ्लेक्स कंटेनर डिस्प्ले इनलाइन बनाता है । बस इतना ही अंतर है display: inline-flexऔर display: flex। ऐसा ही एक तुलना के बीच बनाया जा सकता है display: inline-blockऔर display: block, और एक इनलाइन समकक्ष है कि किसी भी अन्य प्रदर्शन प्रकार काफी । ¹

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

यह स्पष्ट नहीं है कि आप वास्तव में "लंबवत संरेखित" से क्या मतलब है या आप वास्तव में सामग्री इनलाइन क्यों प्रदर्शित करना चाहते हैं, लेकिन मुझे संदेह है कि फ्लेक्सबॉक्स जो भी आप पूरा करने की कोशिश कर रहे हैं उसके लिए सही उपकरण नहीं है। संभावना यह है कि आप जो खोज रहे हैं वह सिर्फ सादा पुरानी इनलाइन लेआउट ( display: inlineऔर / या display: inline-block) है, जिसके लिए फ्लेक्सबॉक्स एक प्रतिस्थापन नहीं है; flexbox है नहीं सार्वभौमिक लेआउट समाधान है कि हर कोई दावा है यह है (मैं इस बताते हुए हूँ क्योंकि गलत धारणा है शायद यही कारण है कि आप पहली जगह में flexbox पर विचार कर रहे है)।

¹ _{ब्लॉक लेआउट और इनलाइन लेआउट के बीच अंतर इस प्रश्न के दायरे से बाहर है, लेकिन जो सबसे बाहर खड़ा है वह ऑटो चौड़ाई है: ब्लॉक-स्तरीय बक्से क्षैतिज रूप से अपने युक्त ब्लॉक को भरने के लिए खिंचाव करते हैं, जबकि इनलाइन-स्तरीय बक्से उनके फिट करने के लिए सिकुड़ते हैं सामग्री। वास्तव में, यह केवल इस कारण से है display: inline-flexकि आप लगभग कभी उपयोग नहीं करेंगे जब तक कि आपके पास अपने फ्लेक्स कंटेनर इनलाइन को प्रदर्शित करने का बहुत अच्छा कारण न हो।}

— बोल्टकॉक
स्रोत

14

फिडेल डेमो को अलग करने के लिए inline-flexऔर flex: jsfiddle.net/mgr0en3q/1 @ फिश-ग्राफिक्स और @astridx द्वारा मूल फिडल

— केविन लॉ

बिलकुल मददगार जवाब। मैं पहली बार उलझन में पड़ गया। जब मैं इनलाइन फ्लेक्स लागू करता हूं तो फ्लेक्स आइटम तब भी नहीं बदलता है जब मैं डिस्प्ले फ्लेक्स के साथ भी आवेदन करता हूं। वास्तव में यह फ्लेक्स कंटेनर पर लागू होता है :)

— फारिस रेहान

68

ठीक है, मुझे पता है कि पहले थोड़ा भ्रमित हो सकता है, लेकिन displayमूल तत्व के बारे में बात कर रहा है, तो इसका मतलब है कि जब हम कहते हैं: display: flex;यह तत्व के बारे में है और जब हम कहते हैं display:inline-flex;, तो यह भी तत्व ही बना रहा है inline...

यह एक div इनलाइन या ब्लॉक बनाने जैसा है , नीचे दिए गए स्निपेट को चलाएं और आप देख सकते हैं कि display flexअगली पंक्ति में कैसे टूटता है:

.inline-flex {
  display: inline-flex;
}

.flex {
  display: flex;
}

p {
  color: red;
}

<body>
  <p>Display Inline Flex</p>
  <div class="inline-flex">
    <header>header</header>
    <nav>nav</nav>
    <aside>aside</aside>
    <main>main</main>
    <footer>footer</footer>
  </div>

  <div class="inline-flex">
    <header>header</header>
    <nav>nav</nav>
    <aside>aside</aside>
    <main>main</main>
    <footer>footer</footer>
  </div>

  <p>Display Flex</p>
  <div class="flex">
    <header>header</header>
    <nav>nav</nav>
    <aside>aside</aside>
    <main>main</main>
    <footer>footer</footer>
  </div>

  <div class="flex">
    <header>header</header>
    <nav>nav</nav>
    <aside>aside</aside>
    <main>main</main>
    <footer>footer</footer>
  </div>
</body>

स्निपेट का विस्तार करें

एक नज़र में अंतर दिखाने के लिए नीचे दी गई छवि को भी जल्दी से बनाएँ:

— एलिरेज़ा
स्रोत

3

आप इस चित्र के लिए क्या उपयोग कर रहे हैं? यह फ़ॉन्ट बहुत अच्छा है।

— शु

5

उपरोक्त छवि पर एक छोटा टाइपो है। "डिस्प्ले: फ्लेक्स-इनलाइन" होना चाहिए "डिस्प्ले: इनलाइन-फ्लेक्स", "इनलाइन-ब्लॉक" के समान, आदि

— एलियनकेविन

62

flexऔर inline-flexदोनों कंटेनर के बच्चों के लिए फ्लेक्स लेआउट लागू करते हैं। कंटेनर display:flexएक ब्लॉक-स्तरीय तत्व की तरह व्यवहार करता है, जबकि display:inline-flexकंटेनर एक इनलाइन तत्व की तरह व्यवहार करता है।

— सिंह
स्रोत

29

"फ्लेक्स" और "इनलाइन-फ्लेक्स" के बीच अंतर

संक्षिप्त जवाब:

एक इनलाइन है और दूसरा मूल रूप से एक ब्लॉक एलिमेंट की तरह प्रतिक्रिया करता है (लेकिन इसके कुछ अंतर हैं)।

दीर्घ उत्तर:

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

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

आपको जो समस्या हो रही है

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

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

नीचे कुछ उदाहरण दिए गए हैं कि कैसे फ्लेक्स बनाम इनलाइन-फ्लेक्स काम करता है और इनलाइन बनाम ब्लॉक तत्वों के काम का एक त्वरित डेमो भी ...

display: inline-flex; flex-direction: row;

बेला

display: flex; flex-direction: row;

बेला

display: inline-flex; flex-direction: column;

बेला

display: flex; flex-direction: column;

बेला

display: inline;

बेला

display: block

बेला

इसके अलावा, एक महान संदर्भ डॉक्टर: फ्लेक्सबॉक्स के लिए एक पूर्ण गाइड - सीएसएस ट्रिक्स

15

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

यह हर फ्लेक्स कंटेनर को स्क्रीन पर एक नई लाइन में ले जाने का कारण बनता है।

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

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

— नूरजहाँ मुकम्मल
स्रोत

1

"फ्लेक्स लेआउट लागू [...] कंटेनर में ही करने के लिए" [उद्धरण वांछित]

— BoltClock

1

आपको थोड़ी और जानकारी चाहिए ताकि ब्राउज़र को पता चल सके कि आपको क्या चाहिए। उदाहरण के लिए, कंटेनर के बच्चों को फ्लेक्स करने के लिए "कैसे" बताया जाना चाहिए।

अपडेटेड फ़िडल

मैंने #wrapper > * { flex: 1; margin: auto; }आपके सीएसएस में जोड़ दिया inline-flexहै और बदल दिया है flex, और आप देख सकते हैं कि कैसे तत्व अब खुद को पेज पर समान रूप से स्थान देते हैं।

— Fiha GRAPHICS
स्रोत

2

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

— astridx

-1

बेहतर समझ के लिए पूर्ण पृष्ठ में खोलें

.item {
  width : 100px;
  height : 100px;
  margin: 20px;
  border: 1px solid blue;
  background-color: yellow;
  text-align: center;
  line-height: 99px;
}

.flex-con {
  flex-wrap: wrap;
  /* <A>    */
  display: flex;
  /* 1. uncomment below 2 lines by commenting above 1 line */
  /* <B>   */
/*   display: inline-flex; */
	
}

.label {
  padding-bottom: 20px;
}
.flex-inline-play {
  padding: 20px;
  border: 1px dashed green;
/*  <C> */
  width: 1000px;
/*   <D> */
  display: flex;
}

<figure>
  <blockquote>
     <h1>Flex vs inline-flex</h1>
    <cite>This pen is understand difference between
    flex and inline-flex. Follow along to understand this basic property of css</cite>
    <ul>
      <li>Follow #1 in CSS:
        <ul>
          <li>Comment <code>display: flex</code></li>
          <li>Un-comment <code>display: inline-flex</code></li>
        </ul>
      </li>
      <li>
        Hope you would have understood till now. This is very similar to situation of `inline-block` vs `block`. Lets go beyond and understand usecase to apply learning. Now lets play with combinations of A, B, C & D by un-commenting only as instructed:
        <ul>
					<li>A with D -- does this do same job as <code>display: inline-flex</code>. Umm, you may be right, but not its doesnt do always, keep going !</li>
          <li>A with C</li>
          <li>A with C & D -- Something wrong ? Keep going !</li>
          <li>B with C</li>
          <li>B with C & D -- Still same ? Did you learn something ? inline-flex is useful if you have space to occupy in parent of 2 flexboxes <code>.flex-con</code>. That's the only usecase</li>
        </ul>
      </li>
    </ul>
  </blockquote>
  
</figure>
<br/>
 <div class="label">Playground:</div>
<div class="flex-inline-play">
  <div class="flex-con">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>
  <div class="flex-con">
    <div class="item">X</div>
    <div class="item">Y</div>
    <div class="item">Z</div>
    <div class="item">V</div>
    <div class="item">W</div>
  </div>
</div>

स्निपेट का विस्तार करें

— पवन गंगवानी
स्रोत