एक फ्लेक्स कंटेनर में तत्व

Question

लपेट नहीं रहे हैं जब मैं एक फ्लेक्स कंटेनर में ब्लॉक तत्व डालने का प्रयास करता हूं, तो वे सभी उसी लाइन पर रहते हैं जैसे कि वे इनलाइन-ब्लॉक थे।

मैं चाहता हूं कि दो पहले div एक ही पंक्ति पर हों, और अंतिम पंक्ति दूसरी पंक्ति पर हो। अफसोस की बात है, यह काम नहीं लग रहा है।

किसी को भी कोई विचार है?

<div style="display: flex"> 
 
    <div style="display: inline-block"> 
 
    This is an inline block element 
 
    </div> 
 
    <div style="display: inline-block"> 
 
    This is an inline block element 
 
    </div> 
 
    <div style="display: block"> 
 
    This is a block element 
 
    </div> 
 
</div>

Answer 1

एक फ्लेक्स कंटेनर की प्रारंभिक सेटिंग flex-wrap: nowrap है। इसका मतलब है कि फ्लेक्स आइटम को एक ही पंक्ति में रहने के लिए मजबूर किया जाता है।

आप flex-wrap: wrap के साथ डिफ़ॉल्ट को ओवरराइड कर सकते हैं।

फ्लेक्स लेआउट में display फ्लेक्स आइटमों का मूल्य अनदेखा किया जाता है।

---

एक फ्लेक्स कंटेनर, जो display: flex या display: inline-flex साथ एक तत्व है, एक flex formatting context स्थापित करता है। हालांकि block formatting context के समान, अंतर हैं।

एक अंतर यह है कि एक फ्लेक्स कंटेनर के बच्चे display संपत्ति को अनदेखा करते हैं।

एक और अंतर यह है कि, एक फ्लेक्स कंटेनर में, मार्जिन पतन नहीं होता है, और float और clear गुणों का कोई प्रभाव नहीं पड़ता है।

एक फ्लेक्स कंटेनर भी कई डिफ़ॉल्ट सेटिंग्स के साथ आता है।उनमें से:

• justify-content: flex-start - फ्लेक्स आइटम लाइन के शुरू में ढेर होगा
• flex-shrink: 1 - फ्लेक्स आइटम हटना करने की अनुमति है और कंटेनर
• align-items: stretch अतिप्रवाह नहीं होगा - फ्लेक्स आइटम कवर करने के लिए विस्तार होगा कंटेनर
• flex-direction: row के पार आकार - फ्लेक्स आइटम संरेखित होगा क्षैतिज
• flex-wrap: nowrap - फ्लेक्स आइटम एक पंक्ति में रहने के लिए मजबूर कर रहे हैं

अंतिम दो आइटम नोट करें।

फ्लेक्स आइटम पंक्ति में पंक्तिबद्ध होंगे और लपेट नहीं सकते हैं।

यदि आप पहली पंक्ति पर दो फ्लेक्स आइटम और दूसरी पंक्ति पर तीसरी वस्तु चाहते हैं, तो कंटेनर को flex-wrap: wrap के साथ बहु-पंक्ति होने दें।

.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.box { 
 
    flex: 0 0 45%; 
 
    height: 50px; 
 
    margin: 5px; 
 
    background-color: lightgreen; 
 
    border: 1px solid #ccc; 
 
}

<div class="container"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
</div>

इसके अलावा, आप फ्लेक्स कंटेनर इनलाइन प्रदर्शित करने के लिए, display: inline-flex नहीं display: flex का उपयोग करना चाहते हैं। ये display: inline-block और display: block से तुलनीय हैं।

Answer 2

• उपयोग flex-wrap:wrap माता-पिता में क्योंकि डिफ़ॉल्ट रूप से flex-wrap बच्चे में nowrap

• उपयोग flex-basis:50%, एक ही आकार में दोनों इनलाइन-ब्लॉक तत्वों को विभाजित करने के लिए है।

इस लेख पर flexbox बारे में विस्तृत जानकारी देखें: A Complete Guide to Flexbox

*, 
 
*::before, 
 
*::after { 
 
    box-sizing: border-box 
 
} 
 
body { 
 
    margin: 0 
 
} 
 
.flex { 
 
    display: flex; 
 
    flex-wrap: wrap 
 
} 
 
.flex div { 
 
    flex: 0 50%; /*change to 1 50% to see the difference */ 
 
    border: 1px solid black; 
 
    padding: 10px 
 
}

<div class="flex"> 
 
    <div> 
 
    This is an inline block element 
 
    </div> 
 
    <div> 
 
    This is an inline block element 
 
    </div> 
 
    <div> 
 
    This is a block element 
 
    </div> 
 
</div>