फ्लेक्सबॉक्स में शेष * क्षैतिज * स्थान भरें

Question

मेरे पास फ्लेक्सबॉक्स में 2 divs अगल-बगल हैं। दाहिना हाथ एक हमेशा एक ही चौड़ाई होना चाहिए, और मैं चाहता हूं कि बाएं हाथ एक को केवल शेष स्थान को पकड़ो। लेकिन यह तब तक नहीं होगा जब तक मैं विशेष रूप से इसकी चौड़ाई निर्धारित नहीं करता।

तो इस समय, यह 96% पर सेट होता है, जो तब तक ठीक दिखता है जब तक कि आप स्क्रीन को वास्तव में स्क्वैश नहीं करते हैं - तब दाहिने हाथ की डिव को उस स्थान का थोड़ा भूखा हो जाता है, जिसकी उसे आवश्यकता होती है।

मुझे लगता है कि मैं इसे छोड़ सकता हूं, लेकिन यह गलत है - जैसे कहने का एक तरीका होना चाहिए:

सही एक हमेशा एक ही है; आप बाईं ओर हैं - आपको वह सब कुछ मिलता है जो बचा हुआ है

.ar-course-nav {
  cursor: pointer;
  padding: 8px 12px 8px 12px;
  border-radius: 8px;
}
.ar-course-nav:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

<br/>
<br/>
<div class="ar-course-nav" style="display:flex; justify-content:space-between;">
  <div style="width:96%;">
    <div style="overflow:hidden; white-space:nowrap; text-overflow:ellipsis;">
      <strong title="Course Name Which is Really Quite Long And Does Go On a Bit But Then When You Think it's Stopped it Keeps on Going for even longer!">
                Course Name Which is Really Quite Long And Does Go On a Bit But Then When You Think it's Stopped it Keeps on Going for even longer!
            </strong>
    </div>
    <div style="width:100%; display:flex; justify-content:space-between;">
      <div style="color:#555555; margin-right:8px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;" title="A really really really really really really really really really really really long department name">
        A really really really really really really really really really really really long department name
      </div>
      <div style="color:#555555; text-align:right; white-space:nowrap;">
        Created: 21 September 2016
      </div>
    </div>
  </div>
  <div style="margin-left:8px;">
    <strong>&gt;</strong>
  </div>
</div>

Answer 1

flex-growफ्लेक्स आइटम को मुख्य अक्ष पर खाली स्थान का उपभोग करने के लिए संपत्ति का उपयोग करें ।

यह संपत्ति आइटम का यथासंभव विस्तार करेगी, लंबाई को गतिशील वातावरण में समायोजित कर सकती है, जैसे स्क्रीन पुन: आकार देना या अन्य वस्तुओं को जोड़ना / हटाना।

एक सामान्य उदाहरण है flex-grow: 1, या, आशुलिपि संपत्ति का उपयोग करना, या flex: 1।

इसलिए, width: 96%अपने डिव के बजाय , उपयोग करें flex: 1।

---

आप ने लिखा:

तो इस समय, यह 96% पर सेट होता है, जो तब तक ठीक दिखता है जब तक कि आप स्क्रीन को वास्तव में स्क्वैश नहीं करते हैं - तब दाहिने हाथ की डिव को उस स्थान का थोड़ा भूखा हो जाता है, जिसकी उसे आवश्यकता होती है।

फिक्स्ड-चौड़ाई div की स्क्वैशिंग एक अन्य फ्लेक्स संपत्ति से संबंधित है: flex-shrink

डिफ़ॉल्ट रूप से, फ्लेक्स आइटम सेट होते हैं, flex-shrink: 1जो कंटेनर के अतिप्रवाह को रोकने के लिए उन्हें सिकुड़ने में सक्षम बनाता है।

इस सुविधा का उपयोग अक्षम करने के लिए flex-shrink: 0।

अधिक जानकारी के लिए देखने के कारक जवाब यहाँ में अनुभाग:flex-shrink

• फ्लेक्स-बेस और चौड़ाई के बीच अंतर क्या हैं?

---

यहाँ मुख्य अक्ष के साथ फ्लेक्स अलाइनमेंट के बारे में अधिक जानें :

• CSS Flexbox में, कोई "औचित्य-आइटम" और "औचित्य-स्व" गुण क्यों नहीं हैं?

यहाँ क्रॉस अक्ष के साथ फ्लेक्स अलाइनमेंट के बारे में अधिक जानें :

• एलाइन-सेल्फ, अलाइन-आइटम और अलाइन-कंटेंट के साथ फ्लेक्स-रैप कैसे काम करता है?

Comments

मेरे पास एक ही स्थिति थी और उपयोग flex-grow: 1करने की तुलना में समान प्रभाव नहीं था flex: 1। क्या आप शायद जानते हैं कि यह अलग क्यों है? (मैंने अपनी समस्या को बाद में, thx के साथ तय किया)

— WhGandalf

इसके साथ flex-grow: 1, flex-basisसंपत्ति autoअपने डिफ़ॉल्ट मूल्य पर रहती है। के साथ flex: 1, flex-basisसंपत्ति में परिवर्तन होता है 0। गहराई से समीक्षा के लिए मेरा जवाब यहां देखें: stackoverflow.com/q/43520932/3597276 @WhGandalf

— माइकल बेंजामिन

फ्लेक्स-हटना मेरे लिए महत्वपूर्ण था :)

— Pixearthth

Answer 2

मूल रूप से मैं अपने कोड को 'पंक्ति' पर एक मध्य भाग में दोनों पक्षों पर सामग्री के लिए ऑटो-समायोजित करने के लिए (मेरे मामले में, एक बिंदीदार रेखा विभाजक) पाने की कोशिश कर रहा था। जैसे @Michael_B ने सुझाव दिया, कुंजी display:flexपंक्ति कंटेनर पर उपयोग कर रही है और कम से कम यह सुनिश्चित कर रही है कि पंक्ति पर आपके मध्य कंटेनर flex-growका बाहरी कंटेनर की तुलना में कम से कम 1 अधिक मूल्य है (यदि बाहरी कंटेनर में कोई flex-growगुण नहीं हैं , तो मध्य कंटेनर केवल 1 की आवश्यकता है flex-grow)।

यहां बताया गया है कि मैं इसे हल करने के लिए क्या कर रहा था और नमूना कोड की कोशिश कर रहा था।

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

.row {
  background: lightgray;
  height: 30px;
  width: 100%;
  display: flex;
  align-items:flex-end;
  margin-top:5px;
}
.left {
  background:lightblue;
}
.separator{
  flex-grow:1;
  border-bottom:dotted 2px black;
}
.right {
  background:coral;
}

<div class="row">
  <div class="left">Left</div>
  <div class="separator"></div>
  <div class="right">Right With Text</div>
</div>
<div class="row">
  <div class="left">Left With More Text</div>
  <div class="separator"></div>
  <div class="right">Right</div>
</div>
<div class="row">
  <div class="left">Left With Text</div>
  <div class="separator"></div>
  <div class="right">Right With More Text</div>
</div>