नेस्टेड CSS3 फ्लेक्सबॉक्स काम नहीं कर रहे हैं

Question

क्या flexboxes घोंसला हो सकता है? मैंने क्षैतिज फ्लेक्सबॉक्स में एक क्षैतिज फ्लेक्सबॉक्स निहित किया है, और लंबवत फ्लेक्सबॉक्स में एक लंबवत फ्लेक्सबॉक्स है। क्रोम में क्षैतिज कार्यों में केवल क्षैतिज और न ही फ़ायरफ़ॉक्स में काम!

मैं एक jsfiddle यहाँ बनाया है: http://jsfiddle.net/NpkTL/1/

लेकिन यहाँ एचटीएमएल है:

<div id="A"> 
    <div id="A1">A1</div> 
    <div id="A2"> 
     <div id="A2-container"> 
      <div id="A2a">A2a</div> 
      <div id="A2b">A2b</div> 
     </div> 
    </div> 
</div> 
<div id="B"> 
    <div id="B1">B1</div> 
    <div id="B2"> 
     <div id="B2-container"> 
      <div id="B2a">B2a</div> 
      <div id="B2b">B2b</div> 
     </div> 
    </div> 
</div> 

और सीएसएस:

* { 
    margin: 0; 
    padding: 0; 
    font-family: Arial;   
} 

#A { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    background: black; 
    width: 50%; 
    height: 100%; 

    display: -moz-box; 
    display: -webkit-box;  
    display: box; 
    -moz-box-orient: horizontal; 
    -webkit-box-orient: horizontal; 
    box-orient: horizontal; 
} 

#A1 { 
background: brown; 
width: 100px; 
height: 80%; 
} 

#A2 { 
background: orange; 
height: 80%; 
-moz-box-flex: 1; 
-webkit-box-flex: 1; 
box-flex: 1;  
} 

#A2-container { 
    display: -moz-box; 
    display: -webkit-box;  
    display: box; 
    -moz-box-orient: horizontal; 
    -webkit-box-orient: horizontal; 
    box-orient: horizontal; 
    width: 100%; 
    height: 100%;  
} 

#A2a { 
    background: red; 
    height: 80%; 
    -moz-box-flex: 1; 
    -webkit-box-flex: 1; 
    box-flex: 1;  
} 

#A2b { 
    background: blue; 
    width: 100px; 
    height: 80%; 
} 

#B { 
    position: absolute; 
    top: 0px; 
    right: 0px; 
    background: gray; 
    width: 50%; 
    height: 100%; 

    display: -moz-box; 
    display: -webkit-box;  
    display: box; 
    -moz-box-orient: vertical; 
    -webkit-box-orient: vertical; 
    box-orient: vertical; 

} 

#B1 { 
    background: brown; 
    width: 80%; 
    height: 100px; 
} 

#B2 { 
    background: orange; 
    width: 80%; 
    -moz-box-flex: 1; 
    -webkit-box-flex: 1; 
    box-flex: 1;  
} 

#B2-container { 
    display: -moz-box; 
    display: -webkit-box;  
    display: box; 
    -moz-box-orient: vertical; 
    -webkit-box-orient: vertical; 
    box-orient: vertical; 
    width: 100%; 
    height: 100%;  
} 

#B2a { 
    background: red; 
    width: 80%; 
    -moz-box-flex: 1; 
    -webkit-box-flex: 1; 
    box-flex: 1;  
} 

#B2b { 
    background: blue; 
    width: 80%; 
    height: 100px; 
} 

#A बाईं तरफ है, # बी दाईं ओर है। # ए और # ए 2-कंटेनर लंबवत फ्लेक्सबॉक्स हैं और # बी और # बी 2-कंटेनर क्षैतिज फ्लेक्सबॉक्स हैं। मैंने अलग-अलग divs के लिए रंग सेट किए हैं और यह देखने के लिए कि क्या हो रहा है, यह देखने के लिए प्रत्येक स्तर पर लंबवत और ऊर्ध्वाधर के लिए ऊंचाई)। यह बाईं ओर ठीक है (क्रोम में!), लेकिन दाईं ओर, # बी 2 ए लंबवत रूप से # बी 2 (नारंगी एक) भरना चाहिए।

मुझे लगता है कि इस उदाहरण में यह 3 से/स्तंभ मध्य पंक्ति में फ्लेक्स के साथ एक flexbox उपयोग करने के लिए आसान होगा, लेकिन मैं गतिशील # के बराबर ए 2 है, जो भी एक होने में सामग्री लोड कर रहा हूँ flexbox।

Answer 1

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

Answer 2

फ्लेक्सबॉक्स को नेस्टेड किया जा सकता है लेकिन आपको अपनी स्थिति से छुटकारा पाना होगा। वैसे भी आपको इसकी आवश्यकता नहीं है।

अब समस्या जो आज के रूप में बनी हुई है, मेरे अनुभव में z-stacking flexboxes है। और यह मुख्य अक्ष पर एक दूसरे से भिन्न रूप से फ्लेक्सबॉक्स आइटमों को स्थिति देने के लिए सीधे आगे नहीं है (उदाहरण के लिए यदि मेरे पास एक पंक्ति है और मैं बाईं ओर एक बच्चे की वस्तु को संरेखित करना चाहता हूं और दाईं ओर एक दूसरे को जोड़ना चाहता हूं, तो मुझे मार्जिन के साथ खेलें और इस पर दर्दनाक हो सकता है)

इसके अलावा परिणाम विभिन्न ब्राउज़रों के आधार पर काफी असंगत हो सकते हैं।

किसी भी तरह से, मैं आपको इसका उपयोग करने के लिए प्रोत्साहित करता हूं: http://the-echoplex.net/flexyboxes/ इससे बहुत मदद मिलती है।