क्रॉस-एक्सिस भरने के लिए बच्चों को कैसे स्ट्रेच करें?

Question

मेरे पास एक बाएँ-दाएँ flexbox है:

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 70vh;
  min-height: 325px; 
  max-height:570px; 
}

<div class="wrapper">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

समस्या यह है कि सही बच्चा जिम्मेदारी से व्यवहार नहीं कर रहा है। विशिष्ट होने के लिए, मैं चाहता हूं कि यह रैपर की ऊंचाई को भरे।

इसे कैसे पूरा करें?

Comments

यह आवरण की ऊंचाई को भरता है! मैंने इसे क्रोम और फ़ायरफ़ॉक्स में परीक्षण किया और कोई समस्या नहीं थी। हो सकता है कि आपने अपने कोड को बहुत सरल कर दिया हो। आप इसे background-colorबच्चों के लिए सेट करके या align-items: centerरैपर में सेट करके टेस्ट कर सकते हैं ।

— समद मोंटेज़री

हाँ, रैपर की ऊंचाई कुछ कारणों से सफारी में नहीं भरी जाती है ... क्रोम और फायरफॉक्स ऊंचाई को निर्धारित करके इसे अच्छी तरह से करता है: बच्चों में '100%'

— पेन्सिलचेक

Answer 1

• एक पंक्ति-फ्लेक्सबॉक्स कंटेनर के बच्चे स्वचालित रूप से कंटेनर के ऊर्ध्वाधर स्थान को भरते हैं।

• flex: 1;यदि आप शेष क्षैतिज स्थान को भरना चाहते हैं तो बच्चे के लिए निर्दिष्ट करें :

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 5em;
  background: #ccc;
}
.wrapper > .left
{
  background: #fcc;
}
.wrapper > .right
{
  background: #ccf;
  flex: 1; 
}

<div class="wrapper">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

• flex: 1;यदि आप उन्हें क्षैतिज स्थान के बराबर मात्रा में भरना चाहते हैं, तो दोनों बच्चों के लिए निर्दिष्ट करें :

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 5em;
  background: #ccc;
}
.wrapper > div 
{
  flex: 1; 
}
.wrapper > .left
{
  background: #fcc;
}
.wrapper > .right
{
  background: #ccf;
}

<div class="wrapper">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

Comments

flexके लिए एक आशुलिपि संपत्ति है flex-grow, flex-shrinkऔर flex-basis। flex: 1;के बराबर है flex-grow: 1;।

— रोरी ओ'केन

जैसे लगता है की align-items: stretch;जरूरत नहीं है

— मैट