तत्वों की लंबवत सूची, जहां प्रत्येक पंक्ति आंतरिक चौड़ाई से मेल खाने के लिए अपनी चौड़ाई को कम करती है

Question

मैं एक लंबवत सूची बनाना चाहता हूं, जहां प्रत्येक पंक्ति अपनी चौड़ाई को पूरी तरह से अपनी आंतरिक सामग्री में बदल देती है (इसके विपरीत डिफ़ॉल्ट div इसकी चौड़ाई को विस्तारित करने का व्यवहार कंटेनर भरें)।

मैं इसे केवल एक प्रत्येक पंक्ति के लिए HTML तत्व (कोई अतिरिक्त रैपिंग divs) के साथ ऐसा करना चाहता हूं।

निम्न कोड ठीक वही करता है जो मैं चाहता हूं, लेकिन यह सफारी (बग?) में काम नहीं करता है।

.container { 
 
    margin: 10px; 
 
    border: 2px solid #999; 
 
    padding: 5px; 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 300px 
 
} 
 
.row-item { 
 
    padding: 5px; 
 
    margin: 5px; 
 
    border: 1px solid green; 
 
    /* this will shrink the width to the inner content 
 
     in Chrome and Firefox, but not in Safari */ 
 
    margin-right: auto; 
 
}

<div class='container'> 
 
    <div class='row-item'>Item #1</div> 
 
    <div class='row-item'>Another Item...</div> 
 
    <div class='row-item'>Item No. 3</div> 
 
</div>

यहाँ एक ऊपर कोड के साथ codepen है: http://codepen.io/anon/pen/woKYqx

मुझे पता है कि यह आंतरिक तत्व पर एक रैपिंग div जोड़ने और फिर का उपयोग कर display: inline-block द्वारा इस समस्या को हल करने के लिए मामूली बात है (या कई अन्य समान समाधान)।

हालांकि, ऐसा लगता है कि अतिरिक्त HTML तत्वों को जोड़ने के बिना इसे हल करना संभव होना चाहिए। यह एक काफी सरल लेआउट है।

क्या प्रत्येक पंक्ति के लिए एकल HTML तत्व के साथ ऐसा करने के लिए एक क्रॉस-ब्राउज़र तरीका है?

Answer 1

आप margin-right: auto का उपयोग कर रहे हैं ताकि तत्व को बाईं तरफ धक्का दिया जा सके, जिससे आइटम को इसकी सामग्री की चौड़ाई ले जाया जा सके।

यह एक अच्छी विधि है, जैसा कि आपने देखा है, यह सफारी में विफल रहता है। सिर्फ फ्लेक्स कंटेनर पर align-items: flex-start का उपयोग

.row-item { 
    padding: 5px; 
    margin: 5px; 
    border: 1px solid green; 
    align-self: flex-start; /* NEW */ 
    /* margin-right: auto; (can be kept or removed) */ 
} 

या,:

एक सामान्य विकल्प फ्लेक्स वस्तुओं पर align-self: flex-start उपयोग करने के लिए है।

.container { 
    margin: 10px; 
    border: 2px solid #999; 
    padding: 5px; 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; /* NEW */ 
    width: 300px 
} 

Answer 2

जब आप डिस्प्ले का उपयोग कर रहे हैं: फ्लेक्स आपको इसके लिए विक्रेता उपसर्ग का भी उपयोग करना चाहिए। भी ब्राउज़रों के पुराने संस्करणों का समर्थन जब संदेह में पर caniuse.com

.container { 
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ 
display: -webkit-flex; /* NEW - Chrome */ 
display: -ms-flexbox; /* TWEENER - IE 10 */ 
display: flex; 
/* ETC */ 
} 

नोट की जांच: caniuse.com कीड़े बारे में लिखा है flexbox के बारे में सूचना दी जा रही सफारी में ऊंचाई बच्चों।

Answer 3

आप सभी फ्लेक्स सामान मिटा सकते हैं और माता-पिता पर float:left और clear:left बच्चों पर, और overflow-x: hidden उपयोग कर सकते हैं:

http://codepen.io/anon/pen/pNjQJJ