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

मेरे पास नीचे एक बेला है, पहले आप दो ब्लॉक देखते हैं कि यह अब कैसा दिखता है, नीचे आप 2 ब्लॉक देखते हैं कि मैं इसे कैसे दिखाना चाहता हूं (मैंने दृश्य कारणों के लिए निश्चित चौड़ाई को परिभाषित किया है, लेकिन मैं चाहता हूं कि यह फ्लेक्सबॉक्स के साथ गतिशील रूप से हो, स्पष्टतः)।

मुझे पूरा यकीन है कि मैं इसे आसानी से कर सकता हूं लेकिन मुझे पेड़ों के लिए लकड़ी नहीं दिख रही है। किसी भी तरह की मदद की अत्यधिक सराहना की जाती है :)

.flex {
  display: flex;
  background: #333;
  max-width: 380px;
}

.first {
  flex: 0;
  background: #666;
}

.second {
  flex: 1;
  background: #999;
}
<p>How it looks like with my flexbox approach</p>

<div class="flex">
  <div class="first">
    Here is my Dynamic Text
  </div>
  <div class="second">
    Next to Text
  </div>
</div>

<br />

<div class="flex">
  <div class="first">
    Here is my Dynamic Text Here is my Dynamic Text 
  </div>
  <div class="second">
    Next to Text
  </div>
</div>

<hr />
<p>How it should look like</p>
<!-- Ignore all code below, please - everything below is just here for visual reasons -->
<div>
  <div style="background: #666; width: 165px; float: left;">Here is my Dynamic Text</div>
  <div style="background: #999; float: left;">Next to text</div>
</div>
<div style="clear: both; height: 10px;">
</div>
<div>
  <div style="background: #666; width: 302px; float: left;">Here is my Dynamic Text Here is my Dynamic Text</div>
  <div style="background: #999;float: left; height: 36px;">Next to text</div>
</div>
1
Steven X 14 जिंदा 2020, 17:45

1 उत्तर

सबसे बढ़िया उत्तर

दूसरे तत्व पर white-space:nowrap का प्रयोग करें ताकि यह ढह न जाए।

  .flex {
  display: flex;
  border: 1px solid green;
}

.first {
  background: lightblue;
  border: 1px solid grey;
}

.second {
  white-space: nowrap;
  background: lightgreen
}

.narrow {
  width: 50%;
<div class="flex">
  <div class="first">
    Here is my Dynamic Text
  </div>
  <div class="second">
    Next to Text
  </div>
</div>
<hr/>


<div class="flex narrow">
  <div class="first">
    Here is my Dynamic Text Here is my Dynamic Text
  </div>
  <div class="second">
    Next to Text
  </div>
</div>
1
Paulie_D 14 जिंदा 2020, 14:58