केंद्र में एक लचीले कॉलम के साथ मेरे पास दो निश्चित चौड़ाई के कॉलम कैसे हो सकते हैं?

Question

मैं तीन स्तंभों के साथ एक फ्लेक्सबॉक्स लेआउट स्थापित करने की कोशिश कर रहा हूं, जहां बाएं और दाएं स्तंभों की एक निश्चित चौड़ाई है, और उपलब्ध स्थान को भरने के लिए केंद्र स्तंभ फ्लेक्स है।

स्तंभों के लिए आयाम स्थापित करने के बावजूद, वे अभी भी सिकुड़ते प्रतीत होते हैं जैसे कि खिड़की सिकुड़ती है।

किसी को पता है कि यह कैसे पूरा करने के लिए?

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

#container {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    max-width: 1200px;
}

.column.left {
    width: 230px;
}

.column.right {
    width: 230px;
    border-left: 1px solid #eee;
}

.column.center {
    border-left: 1px solid #eee;
}

<div id="container">
    <div class="column left">
        <p>Anxiety was a blog series that ran in the New York Times Opinion section from January 2012 to July 2013. It featured essays, fiction, and art by a wide range of contributors that explored anxiety from scientific, literary, and artistic perspectives.</p>
    </div>
    <div class="column center">
        <img src="http://i.imgur.com/60PVLis.png" width="100" height="100" alt="">
    </div>
    <div class="column right">
        Balint Zsako
        <br/> Someone’s Knocking at My Door
        <br/> 01.12.13
    </div>
</div>

यहाँ एक JSFiddle: http://jsfiddle.net/zDd2g/185/

Comments

jsfiddle.net/5aor2b0x/11

— zloctb

Answer 1

उपयोग करने के बजाय width(जो फ्लेक्सबॉक्स का उपयोग करते समय एक सुझाव है), आप इसका उपयोग कर सकते हैं flex: 0 0 230px;जिसका अर्थ है:

• 0= नहीं बढ़ता (के लिए आशुलिपि flex-grow)
• 0हटना नहीं है (शॉर्टहैंड के लिए flex-shrink)
• 230px= पर शुरू 230px(के लिए आशुलिपि flex-basis)

जिसका अर्थ है: हमेशा रहो 230px।

फिडल देखें , धन्यवाद @TylerH

ओह, और आपको यहां justify-contentऔर align-itemsयहां की जरूरत नहीं है।

img {
    max-width: 100%;
}
#container {
    display: flex;
    x-justify-content: space-around;
    x-align-items: stretch;
    max-width: 1200px;
}
.column.left {
    width: 230px;
    flex: 0 0 230px;
}
.column.right {
    width: 230px;
    flex: 0 0 230px;
    border-left: 1px solid #eee;
}
.column.center {
    border-left: 1px solid #eee;
}

Comments

वर्तमान कार्यान्वयन में (कम से कम क्रोम में), आपको यह भी सुनिश्चित करना होगा कि मध्य स्तंभ ने flex-growपरिभाषित किया है (जैसा कि 1 कहते हैं)। अपडेटेड फ़िडल ।

— बेसेटन

सिर्फ चौड़ाई काम क्यों नहीं करती है? और मुझे फ्लेक्स की आवश्यकता है: 0 0 230px ;;

— रोड्रिगो रुइज़

flex-grow: 1Chrome 53 में द्रव कॉलम के लिए अभी भी आवश्यक है। अन्यथा, यह शेष चौड़ाई को नहीं लेगा। मुझे लगता है कि उत्तर को इस तथ्य पर विचार करना चाहिए।

— थिब्जी

किसी के लिए अभी भी उलझन में है, flex: 0 0 200pxउसी के रूप में कार्य करता है width: 200px; flex-shrink: 0।

— bryc

रुडी के गुम हो जाने की स्थिति में मैंने यहां फिडेल की नकल की है: jsfiddle.net/133rr51u

— TylerH

Answer 2

स्तंभों के लिए आयाम स्थापित करने के बावजूद, वे अभी भी सिकुड़ते प्रतीत होते हैं जैसे कि खिड़की सिकुड़ती है।

एक फ्लेक्स कंटेनर की प्रारंभिक सेटिंग है flex-shrink: 1। इसलिए आपके कॉलम सिकुड़ रहे हैं।

इससे कोई फर्क नहीं पड़ता कि आप किस चौड़ाई को निर्दिष्ट करते हैं ( यह हो सकता हैwidth: 10000px ), flex-shrinkनिर्दिष्ट चौड़ाई के साथ अनदेखा किया जा सकता है और फ्लेक्स आइटम को कंटेनर को ओवरफ्लो करने से रोका जाता है।

मैं 3 कॉलम के साथ एक फ्लेक्सबॉक्स स्थापित करने की कोशिश कर रहा हूं, जहां बाएं और दाएं कॉलम में एक निश्चित चौड़ाई है ...

आपको सिकुड़ने को अक्षम करना होगा। यहाँ कुछ विकल्प दिए गए हैं:

.left, .right {
     width: 230px;
     flex-shrink: 0;
 }  

या

.left, .right {
     flex-basis: 230px;
     flex-shrink: 0;
}

या, युक्ति द्वारा अनुशंसित:

.left, .right {
    flex: 0 0 230px;    /* don't grow, don't shrink, stay fixed at 230px */
}

7.2। लचीलापन के घटक

लेखकों को flexशॉर्टहैंड का उपयोग करके लचीलेपन को नियंत्रित करने के लिए प्रोत्साहित किया जाता है, न कि सीधे अपने लंबे समय के गुणों के साथ, क्योंकि शॉर्टहैंड किसी भी अनिर्दिष्ट घटक को सामान्य उपयोगों को समायोजित करने के लिए सही ढंग से रीसेट करता है ।

यहाँ अधिक विवरण: फ्लेक्स-बेस और चौड़ाई के बीच अंतर क्या हैं?

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

इसे इस्तेमाल करे:

.center { flex: 1; }

यह केंद्र स्तंभ को उपलब्ध स्थान का उपभोग करने की अनुमति देगा, जिसमें उनके भाई-बहनों के स्थान शामिल हैं जब उन्हें हटा दिया जाता है।

संशोधित फिडल

Comments

flex: 1;केंद्र divमें जोड़ना पर्याप्त था, धन्यवाद।

— DIES

Answer 3

पुराने ब्राउज़रों के साथ संगतता एक ड्रैग हो सकती है, इसलिए सलाह दी जाए।

अगर वह समस्या नहीं है तो आगे बढ़ें। स्निपेट चलाएं। पूर्ण पृष्ठ दृश्य पर जाएं और आकार बदलें। केंद्र बाईं या दाईं ओर के विभाजन में कोई बदलाव नहीं करेगा।

अपनी आवश्यकता को पूरा करने के लिए बाएं और दाएं मान बदलें।

धन्यवाद।

उम्मीद है की यह मदद करेगा।

#container {
  display: flex;
}

.column.left {
  width: 100px;
  flex: 0 0 100px;
}

.column.right {
  width: 100px;
  flex: 0 0 100px;
}

.column.center {
  flex: 1;
  text-align: center;
}

.column.left,
.column.right {
  background: orange;
  text-align: center;
}

<div id="container">
  <div class="column left">this is left</div>
  <div class="column center">this is center</div>
  <div class="column right">this is right</div>
</div>