बदलें जब फ्लेक्स आइटम निम्नलिखित में कंटेनर

Question

देखो अतिप्रवाह बेला https://jsfiddle.net/27x7rvx6

सीएसएस (#test flexbox कंटेनर है, और .items उसके चिल्ड्रन हैं):

#test { 
    display: flex; 
    flex-flow: row nowrap; 
    justify-content: center; 
    width: 300px; 
    margin-left: 150px; 
    border: 2px solid red; 
} 
.item { 
    flex: 0 0 70px; 
    margin-right: 10px; 
    background: blue; 
    height: 70px; 
    border: 2px solid black; 
} 

एक एक लाइन नहीं है (nowrap) निश्चित आकार वस्तुओं के साथ flexbox। कंटेनर में justify-contentcenter पर सेट है। क्योंकि आइटम कम नहीं हो सकते हैं और कंटेनर से अधिक व्यापक हैं जो वे बहने लगते हैं।

मेरी समस्या यह है कि सामग्री बाएं और दाएं दोनों ओर बहती है। सामग्री को केंद्र में उचित बनाने का कोई तरीका है लेकिन एक बार जब यह ओवरफ्लो शुरू हो जाता है तो इसे justify-content की तरह कार्य करें flex-start, resp। इसे केवल कंटेनर के दाहिनी ओर बहती है?

Answer 1

justify-content आपके द्वारा वर्णित समस्या के कारण केंद्र के लिए सही दृष्टिकोण नहीं है।

इसके बजाय, मैं auto margins की अनुशंसा करता हूं। तुम केंद्र के लिए उन्हें इस्तेमाल कर सकते हैं:

पहले संरेखण के लिए justify-content और align-self, के माध्यम से किसी भी सकारात्मक मुक्त अंतरिक्ष कि आयाम में ऑटो मार्जिन को वितरित किया जाता है।

और वे व्यवहार करते हैं जैसा कि आप अतिप्रवाह के साथ हैं:

बह निकला बक्से उनके ऑटो मार्जिन और end दिशा में अतिप्रवाह ध्यान न दें।

उदाहरण के लिए, आप पिछले एक करने के लिए पहले फ्लेक्स आइटम पर margin-left: auto और margin-right: auto सेट करें, या सम्मिलित ::before और ::after छद्म तत्वों कर सकते हैं।

.test { 
 
    display: flex; 
 
    flex-flow: row nowrap; 
 
    width: 200px; 
 
    border: 2px solid red; 
 
    margin: 10px; 
 
} 
 
.wide.test { 
 
    width: 500px; 
 
} 
 
.test::before, .test::after { 
 
    content: ''; /* Insert pseudo-element */ 
 
    margin: auto; /* Make it push flex items to the center */ 
 
} 
 
.item { 
 
    flex: 0 0 50px; 
 
    margin-right: 10px; 
 
    background: blue; 
 
    height: 50px; 
 
    border: 2px solid black; 
 
}

<div class="test"> 
 
    <div class="item"></div><div class="item"></div><div class="item"></div> 
 
    <div class="item"></div><div class="item"></div><div class="item"></div> 
 
</div> 
 
<div class="wide test"> 
 
    <div class="item"></div><div class="item"></div><div class="item"></div> 
 
    <div class="item"></div><div class="item"></div><div class="item"></div> 
 
</div>