स्क्रॉल फ्लेक्स कंटेनर केंद्रित

Question

आइटम फिट नहीं करता है

HTML:

<div id="container"> 
    <div class="item">Foo</div> 
    <div class="item">Bar</div> 
</div> 

सीएसएस:

#container { 
    display: flex; 
    justify-content: center; 
    overflow: auto; 
} 
.item { 
    flex-grow: 1; 
    min-width: 200px; 
    max-width: 300px; 
} 

ऊपर कंटेनर कम से कम 400px के लिए सिकुड़ जाता है, एक क्षैतिज स्क्रॉल पट्टी के रूप में उम्मीद दिखाई देता है। हालांकि, पहली वस्तु कंटेनर के बाएं किनारे से आंशिक रूप से अस्पष्ट हो जाती है, भले ही बाईं तरफ स्क्रॉल किया जाए। जैसे ही कंटेनर कम हो जाता है, अधिकतर वस्तु अस्पष्ट होती है।

डेमो: http://jsfiddle.net/FTKcQ/। देखने के लिए परिणाम फ्रेम का आकार बदलें। क्रोम 30 और Firefox 24.

हैं justify-content किसी अन्य मूल्य (जैसे space-between) करने के लिए करने के लिए center से बदल गया है में परीक्षण किया गया है, तो सभी सामग्री स्क्रॉल करके दिख रहा है। केंद्रित वस्तुएं अलग-अलग व्यवहार क्यों करती हैं?

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

Answer 1

MDN (Flex item considerations) के अनुसार, इस व्यवहार अब के लिए आशा की जाती है:

flexbox के संरेखण गुण करना "सही" केंद्रित, सीएसएस में अन्य केंद्रित तरीकों के विपरीत। इसका मतलब यह है कि फ्लेक्स आइटम केंद्रित रहेंगे, भले ही वे फ्लेक्स कंटेनर ओवरफ्लो करें। यह कभी-कभी समस्याग्रस्त हो सकता है, हालांकि, यदि वे पृष्ठ के ऊपरी किनारे से ऊपर या बाएं किनारे से ऊपर बहते हैं, क्योंकि आप उस क्षेत्र तक स्क्रॉल नहीं कर सकते हैं, भले ही वहां सामग्री हो! भविष्य में रिलीज में, संरेखण गुणों को एक "सुरक्षित" विकल्प भी बढ़ाया जाएगा।

अभी के लिए, यदि यह चिंता का विषय है, तो आप इसके बजाय केंद्र को प्राप्त करने के लिए मार्जिन का उपयोग कर सकते हैं, क्योंकि वे "सुरक्षित" तरीके से प्रतिक्रिया देंगे और यदि वे बहते हैं तो केंद्र केंद्रित करना बंद कर दें। संरेखण-गुणों का उपयोग करने के बजाय, केवल उन फ्लेक्स आइटमों पर ऑटो मार्जिन डालें जिन्हें आप केंद्र बनाना चाहते हैं। औचित्य के गुणों के बजाय, फ्लेक्स कंटेनर में पहले और अंतिम फ्लेक्स आइटम के बाहरी किनारों पर ऑटो मार्जिन डालें।

तो, आप संरेखण के लिए मार्जिन का उपयोग करके अपेक्षित परिणाम प्राप्त कर सकते हैं। अंतिम आइटम के लिए बस margin-left: auto और अंतिम के लिए margin-right:auto जोड़ें।

मेरे डेमो: http://jsfiddle.net/WFxQk/

Answer 2

शैली पत्रक

 
    #container { 
     background-color: green; 
     display: flex; 
     /* justify-content: center */ ; 
     align-items: center; 
     overflow: auto; 
    } 
    .item { 
     background-color: white; 
     border: 1px solid black; 
     flex-grow: 1; 
     flex-shrink: 1; 
     flex-basis: auto; 
     min-width: 200px; 
     max-width: 300px; 
     margin: auto; 
    } 

मैं justify-content हटा दिया, डिफ़ॉल्ट flex-start करने के लिए इसे बनाने के साथ प्रयास करें। और, margin:auto जोड़ा जो ऐसा लगता है कि यह केंद्र संरेखण बनाता है।

अपडेट किया गया डेमो: http://jsfiddle.net/FTKcQ/1/