CSS फ्लेक्सबॉक्स के साथ एक निश्चित चौड़ाई वाला कॉलम कैसे सेट करें

Question

CodePen: http://codepen.io/anon/pen/RPNpaP ।

मैं चाहता हूं कि लाल बॉक्स केवल 25 एम चौड़ा हो जब यह साइड-बाय-साइड व्यू में हो - मैं इस मीडिया क्वेरी के अंदर CSS सेट करके इसे प्राप्त करने की कोशिश कर रहा हूं:

@media all and (min-width: 811px) {...}

सेवा:

.flexbox .red {
  width: 25em;
}

लेकिन जब मैं ऐसा करता हूं, तो ऐसा होता है:

http://i.imgur.com/niFBrwt.png

किसी भी विचार मैं गलत क्या कर रहा हूँ?

Answer 1

आपको इसके बजाय flexया flex-basisसंपत्ति का उपयोग करना चाहिए width। पर और अधिक पढ़ें MDN ।

.flexbox .red {
  flex: 0 0 25em;
}

flexसीएसएस संपत्ति एक आशुलिपि संपत्ति उसके आयाम को बदलने के लिए उपलब्ध स्थान को भरने के लिए एक फ्लेक्स मद की क्षमता को निर्दिष्ट है। इसमें शामिल है:

flex-grow: 0;     /* do not grow   - initial value: 0 */
flex-shrink: 0;   /* do not shrink - initial value: 1 */
flex-basis: 25em; /* width/height  - initial value: auto */

---

एक साधारण डेमो दिखाता है कि पहले कॉलम को 50pxनिश्चित चौड़ाई में कैसे सेट किया जाए ।

.flexbox {
  display: flex;
}
.red {
  background: red;
  flex: 0 0 50px;
}
.green {
  background: green;
  flex: 1;
}
.blue {
  background: blue;
  flex: 1;
}

<div class="flexbox">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

---

अपने कोड के आधार पर अपडेटेड कोडपेन देखें ।

Comments

मुझे एहसास नहीं था कि मुझे ओवरराइड करना होगा flex-shrink, धन्यवाद, अच्छा जवाब।

— पॉल रेडमंड

प्राप्त नहीं कर सका फ्लेक्स-आधार: जब तक मैं अपने घटक पुस्तकालय के ग्रिड का एहसास काम करने के लिए स्वत: (सिमेंटिक यूआई प्रतिक्रिया) एक दुष्ट सीएसएस नियम स्तंभ के डिफ़ॉल्ट की स्थापना की थी चौड़ाई 😅 medium.freecodecamp.org/...

— रोमन Scher

Answer 2

यदि कोई व्यक्ति प्रतिशत (%) के साथ उत्तरदायी फ्लेक्सबॉक्स रखना चाहता है तो यह मीडिया के प्रश्नों के लिए बहुत आसान है।

flex-basis: 25%;

टेस्टिंग के समय यह काफी स्मूद होगा।

// VARIABLES
$screen-xs:                                         480px;
$screen-sm:                                         768px;
$screen-md:                                         992px;
$screen-lg:                                         1200px;
$screen-xl:                                         1400px;
$screen-xxl:                                        1600px;

// QUERIES
@media screen (max-width: $screen-lg) {
    flex-basis: 25%;
}

@media screen (max-width: $screen-md) {
    flex-basis: 33.33%;
}