फ्लेक्स: जब टेक्स्ट नई लाइन

Question

में बहुत लंबा तोड़ता है तो मैं सोच रहा था कि सीएसएस फ्लेक्सबॉक्स का उपयोग करके निम्नलिखित प्राप्त करना संभव है।

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

क्या कोई तरीका है, केवल सीएसएस (विशेष रूप से फ्लेक्सबॉक्स) का उपयोग करने के लिए, जब टेक्स्ट बहुत लंबा होता है, तो div नई लाइन (पहले div के तहत) पर टूट जाएगा?

निम्नलिखित छवि देखें।

Answer 1

आप display: flex;, और flex-wrap: wrap; के साथ एक कंटेनर बनाकर ऐसा कर सकते हैं। तब अतिप्रवाह पाठ एक flex-grow: 1;

.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    align-items: center; 
 
} 
 

 
.fixed-width { 
 
    width: 200px; 
 
    border: 1px solid red; 
 
} 
 

 
.fixed-width, 
 
.overflow-text { 
 
    display: flex; 
 
    justify-content: space-around; 
 
} 
 

 
.overflow-text { 
 
    flex-grow: 1; 
 
    border: 1px solid red; 
 
}

<div class="container"> 
 
    <div class="fixed-width"> 
 
    <p>Hi</p> 
 
    <p>Hi</p> 
 
    <p>Hi</p> 
 
    <p>Hi</p> 
 
    </div> 
 
    <div class="overflow-text"><p>This is some text that is really long.</p></div> 
 
</div>

JSFiddle