अन्य फ्लेक्स आइटम से मेल खाने के लिए एक फ्लेक्स आइटम की ऊँचाई को रोकें

Question

मेरे पास एक कंटेनर के अंदर दो तत्व हैं, जो फ्लेक्स बॉक्स का उपयोग करके साइड-बाय-साइड हो रहे हैं। दूसरे तत्व ( .flexbox-2) पर, मैं इसे सीएसएस में ऊंचाई निर्धारित कर रहा हूं। हालांकि, फिर पहला तत्व ( .flexbox-1) की ऊंचाई से मेल खाएगा .flexbox-2। मैं किस प्रकार .flexbox-1की ऊंचाई से मेल खाना बंद कर दूंगा .flexbox-2, और इसके बजाय इसकी प्राकृतिक ऊंचाई को बनाए रखूंगा?

यहाँ मेरे पास अब तक ( jsFiddle के रूप में भी उपलब्ध है )

.container {
  display: -webkit-flex;
  -webkit-flex-direction: row;
}
.flexbox-1 {
  -webkit-flex: 1;
  border: solid 3px red;
}
.flexbox-2 {
  -webkit-flex: 2;
  border: solid 3px blue;
  height: 200px;
  margin-left: 10px;
}

<div class="container">
  <div class="flexbox-1">.flexbox-1</div>
  <div class="flexbox-2">.flexbox-2</div>
</div>

Comments

संबंधित: फ्लेक्सबॉक्स में बराबर ऊंचाई के कॉलम को कैसे निष्क्रिय करें?

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

Answer 1

यह एक पुराना समाधान है। हारून द्वारा उपयोग किएalign-self गए इस नए उत्तर से मेरा उत्तर प्रभावित हुआ है । यह एक बेहतर समाधान है जो CSS quirk पर निर्भर नहीं करता है।

जब तक फ्लेक्स कंटेनर की खुद की ऊंचाई नहीं होगी , आप height: 0%पहले फ्लेक्स आइटम पर सेट कर सकते हैं । क्योंकि उसके पास अपने माता-पिता से विरासत में कोई ऊँचाई नहीं है, कोई भी प्रतिशत ऊँचाई उसके पतन का कारण बनेगी। यह तब अपनी सामग्री के साथ बढ़ेगा।

उदाहरण

इस उदाहरण में मैंने -webkitउपसर्ग को हटा दिया है । यह वास्तव में केवल सफारी के लिए आवश्यक है और उपसर्ग को गैर-उपसर्ग संस्करण से ऊपर जोड़ा जा सकता है । मैंने flex-direction: rowइसे भी हटा दिया क्योंकि यह डिफ़ॉल्ट मान है।

.container {
  display: flex;
}
.flexbox-1 {
  flex: 1;  
  height: 0%;  
  border: solid 3px red;
}
.flexbox-2 {
  flex: 2;
  border: solid 3px blue;
  height: 200px;
  margin-left: 10px;
}

<div class="container">
  <div class="flexbox-1">.flexbox-1</div>
  <div class="flexbox-2">.flexbox-2</div>
</div>

Answer 2

मुझे पता है कि यह एक पुराना सवाल है, लेकिन बेहतर उपाय यह है कि फ्लेक्स आइटम का उपयोग करके शीर्ष पर संरेखित किया जाए flex-start।

/* Default Styles */
.container {
  display: flex;
}
.flexbox-2 {
  flex: 2;
  border: solid 3px blue;
  height: 200px;
  margin-left: 10px;
}
 .flexbox-1 {
  flex: 1;  
  align-self: flex-start;  
  border: solid 3px red;
}

<div class="container">
  <div class="flexbox-1">"align-self: flex-start;"</div>
  <div class="flexbox-2">.flexbox-2</div>
</div>

Comments

धन्यवाद @MrGood स्वीकृत उत्तर 3 साल से अधिक पुराना है और उस समय वांछित परिणाम प्राप्त करने का एक अच्छा तरीका था।

— हारून

शानदार जवाब!

— अलेक्जेंडर विगमोर

ध्यान दें कि आप सभी बच्चों को बढ़ने से रोकने के लिए मूल तत्व पर 'संरेखित-आइटम: फ्लेक्स-स्टार्ट' कर सकते हैं - जो मेरे मामले में आवश्यक है।

— डैनियल सोकोलोव्स्की

align-items: center, baseline, flex-start, flex-endसाथ ही साथ काम कर रहे हैं

— ViES

यह आवश्यक है क्योंकि इसके लिए डिफ़ॉल्ट मान align-itemsहै stretch।

— DylanReile

Answer 3

आप इसे आसानी से ठीक कर सकते हैं जो कि माता - पिता के संरेखित आइटम में जोड़कर : फ्लेक्स-स्टार्ट;

बस इतना ही

Comments

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

— जेसन एलर

Answer 4

heightबच्चों की सेटिंग max-contentउन्हें सिकुड़ने से रोक सकेगी।

.container {
  display: -webkit-flex;
  -webkit-flex-direction: row;
}
.flexbox-1 {
  -webkit-flex: 1;
  border: solid 3px red;
  height: max-content;
}
.flexbox-2 {
  -webkit-flex: 2;
  border: solid 3px blue;
  height: 200px;
  margin-left: 10px;
}

<div class="container">
  <div class="flexbox-1">.flexbox-1</div>
  <div class="flexbox-2">.flexbox-2</div>
</div>