फ्लेक्स आइटम क्षैतिज रूप से लंबवत रूप से प्रदर्शित करने के लिए कैसे करें?

मैं 2 तत्वों को लंबवत रूप से प्रदर्शित करने की कोशिश कर रहा हूं। यह काम करना चाहिए, लेकिन फ़ायरफ़ॉक्स 21 पर तत्व क्षैतिज रूप से दिखाई देते हैं।फ्लेक्स आइटम क्षैतिज रूप से लंबवत रूप से प्रदर्शित करने के लिए कैसे करें?

कोई भी जानता है कि इसे क्यों और कैसे ठीक किया जाए?

<!DOCTYPE html> 
<html> 
<head> 
<style> 
div 
{ 
    width: 50%; 
    display: -moz-box; 
    -moz-flex-direction: column; 
}  
#p1 
{ 
    border:1px solid red; 
}  
#p2 
{ 
    border:1px solid blue; 
} 
</style> 
</head> 
<body>  
<div> 
<div id="p1">item1</div> 
<div id="p2">item2</div> 
</div> 
</body> 
</html>

स्रोत

2013-05-31 Steve H

आप वाक्यविन्यास मिश्रण कर रहे हैं। आपने पुरानी वाक्यविन्यास (जो वर्तमान में फ़ायरफ़ॉक्स का समर्थन करता है) के साथ फ्लेक्सबॉक्स सक्षम किया है, लेकिन आप उन्हें नए वाक्यविन्यास के साथ लंबवत बनाने का प्रयास करते हैं।

आप तो आप को शामिल करना चाहिए वह भी, उपयोग करने के लिए -moz-box-orient: vertical;

div { 
    width: 50%; 
    display: -moz-box; 
    -moz-box-orient: vertical; 
}

http://jsfiddle.net/TPf3P/

फ़ायरफ़ॉक्स जल्द ही (उपसर्ग के बिना) नवीनतम वाक्य रचना का उपयोग करेगा की जरूरत है। यह वाक्यविन्यास आईई 11, ओपेरा, और क्रोम में भी काम करेगा (इस मामले में -webkit- उपसर्ग)।

आपको -वेबिट उपसर्ग के साथ पुराना वाक्यविन्यास भी जोड़ना चाहिए, ताकि यह सफारी में काम करे।

display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 

    -webkit-box-orient: vertical; 
    -moz-box-orient: vertical; 
    -webkit-flex-direction: column; 
    -ms-flex-direction: column; 
    flex-direction: column;

http://jsfiddle.net/TPf3P/1/

स्रोत

2013-05-31 06:02:19

वाह, यह मुझे हर ब्राउज़र के लिए 'फ्लेक्स-direction' समर्थन नीचे ट्रैक करने के लिए घंटे लगे: IE10 भी एक अलग वाक्य रचना का समर्थन करता है। धन्यवाद, यह पूरी तरह से काम करता है। – JacobTheDev

आपने बॉक्स-ओरिएंट का उपयोग क्यों नहीं किया: लंबवत ;? – confile

धन्यवाद! आप [autoprefixer] (https://github.com/postcss/autoprefixer) का भी उपयोग कर सकते हैं। –

फ्लेक्स आइटम क्षैतिज रूप से लंबवत रूप से प्रदर्शित करने के लिए कैसे करें?

उत्तर

संबंधित मुद्दे