फ्लेक्सबॉक्स क्रॉस आकार निर्दिष्ट मान

Question

क्या फ्लेक्सबॉक्स के क्रॉस अक्ष पर लेआउट के लिए flex- * शैली गुण निर्दिष्ट करने के लिए कोई तंत्र है?

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

#container { 
    display: flex; 
    flex-flow: row wrap; 
    align-items: stretch; 
} 

#left { 
    flex: 1 0 200px; 
} 

#right { 
    flex: 1000 0 200px; 
} 

200px के आधार और 0 से छोटा स्थापना करके, इस बाएँ बॉक्स 200px की एक न्यूनतम चौड़ाई देता है, और बनाम बड़े पैमाने पर एक छोटे से बढ़ने मूल्य निर्धारित करके दाएं बॉक्स में एक, दायां बॉक्स शेष स्थान भर देगा और बायां मूल रूप से आकार में नहीं बदलेगा। मैं संख्याओं को इस तरह से व्यवस्थित करता हूं क्योंकि जब कंटेनर 400px से छोटा होता है तो सही बॉक्स कंटेनर के निचले भाग तक घूमता है, जिस बिंदु पर बाएं बॉक्स का बढ़ता मूल्य अनचाहे होता है और यह कंटेनर के पूर्ण आकार में बढ़ता है।

मेरे पास समस्या क्रॉस अक्ष पर परिणामी आकार के साथ है। यदि दायां बॉक्स सामग्री के साथ भर जाता है, तो यह कंटेनर को ओवरफ्लो करना शुरू कर देता है, जब मुझे इसकी बजाय स्क्रॉलिंग शुरू करने की आवश्यकता होती है। सबसे अच्छा लगता है कि मैं यहां करने में सक्षम हूं, कंटेनर पर एक ओवरफ्लो-वाई सेट किया गया है, जो बाएं बॉक्स समेत पूरे कंटेनर को स्क्रॉल करता है। 100% की अधिकतम ऊंचाई निर्धारित करना अभी भी कंटेनर की पूरी ऊंचाई से संबंधित है, और किसी भी अन्य ऊंचाई मान को सेट करने पर बॉक्स की ऊंचाई को प्रभावित करता है, जहां मुझे पूरी लंबाई तक फैलाने की आवश्यकता होती है।

आप this fiddle पर प्रभाव देख सकते हैं। जब कंटेनर 400px से कम होता है, तो नीला बॉक्स चारों ओर लपेटता है। नीले रंग के बक्से में 200px की न्यूनतम ऊंचाई होती है, इसलिए यह उस को संतुष्ट करता है और फिर शेष बक्से शेष लंबवत ऊंचाई को भरने के लिए फैला होता है। लेकिन जब आप पर्याप्त क्लिक करते हैं, तो नीला बॉक्स ओवरफ्लो शुरू होता है, और ओवरफ्लो-वाई द्वारा निहित नहीं किया जा सकता है क्योंकि इसमें कोई निश्चित ऊंचाई मान नहीं है।

अनिवार्य रूप से जो मैं चाहता फ्लेक्स सेटिंग में एक ही मान है, लेकिन पार अक्ष के लिए:

#left { 
    cross: 1000 0 auto; 
} 

#right { 
    cross: 1 0 200px; 
} 

इस तरह वे दोनों खिंचाव खड़ी अंतरिक्ष जब कोई चादर है, लेकिन जब रैप होता है को भरने के लिए दायां बॉक्स 200px की ऊंचाई प्राप्त करता है और बायां बॉक्स शेष लंबवत स्थान भरता है। क्या इस प्रभाव को प्राप्त करने का कोई तरीका है, बशर्ते उपर्युक्त संपत्ति मौजूद न हो?

Answer 1

जैसा कि आप जानते हैं कि आप 400px से नीचे के दूसरे व्यवहार को चाहते हैं तो आप फ्लेक्स प्रवाह की दिशा को बदलने के लिए केवल मीडिया टैग का उपयोग कर सकते हैं। फिर आप अपने मूल्य निर्धारित करने के लिए सामान्य फ्लेक्स प्रॉपर्टी का उपयोग कर सकते हैं।

@media (max-width: 399px) { 
    body { 
    flex-direction: column; 
    } 

    #left { 
    cross: 1000 0 auto; 
    } 

    #right { 
    cross: 1 0 200px; 
    overflow: auto; 
    } 
} 

इस उत्तर लेकिन एक अच्छी मदद जब flexbox समस्याओं और क्या फ्लेक्स गुण मौजूद है पर सवाल के साथ काम कर के साथ असंबंधित बू सीएसएस-ट्रिक्स "flexbox करने के लिए एक पूरा गाइड" है https://css-tricks.com/snippets/css/a-guide-to-flexbox/