कंटेनरों को मुख्य कंटेनर में लपेटने से पहले नेस्टेड फ्लेक्स कंटेनरों में फ्लेक्स आइटम लपेटें

Question

यदि मेरे पास एक कंटेनर के निहित आइटम कंटेनर से पहले लपेटते हैं, तो मैं कैसे कंटेनरों के निहित आइटम को लपेटूं?

उदाहरण (codepen) के लिए:

एचटीएमएल

<div> 
    <row> 
     <column id="first"> 
      <widget width=1 height=8></widget> 
      <widget width=1 height=8></widget> 
     </column> 
     <row id="second"> 
      <widget></widget> 
      <widget></widget> 
      <widget></widget> 
     </row> 
    </row> 
</div> 

सीएसएस

column, row, widget { 
    background: RGBA(0,0,0,.2); 
    margin: 1em; 
    display: flex; 
    flex-wrap: wrap; 
    align-items: top; 
    align-content: flex-start; 
} 

row { 
    flex-direction: row; 
} 

column { 
    flex-direction: column; 
} 

widget { 
    min-height: 100px; 
    flex-grow: 2; 
    flex-shrink: 1; 
    width: calc(25% - 3em); 
    min-width: 300px; 
    height: 100px; 
    flex-basis: 0; 
    padding: .5em; 
    display: block; 
} 

widget[width=1] { 
    flex-grow: 1; 
    min-width: 150px; 
} 

widget[width=4] { 
    flex-grow: 4; 
    min-width: 600px; 
} 

widget[width=8] { 
    flex-grow: 8; 
    min-width: 1200px; 
} 

widget[height=1] { 
    min-height: 150px; 
} 

widget[height=4] { 
    min-height: 600px; 
} 

widget[height=8] { 
    min-height: 1200px; 
} 

widget { 
    background: RGBA(200,0,20,.5); 
} 

मैंने पहले #second के नीचे ही लपेटता #first#second में आइटम रैप करने के लिए चाहते हैं। दूसरे शब्दों में, मैं हमेशा बाहरीतम लोगों को लपेटने की कोशिश करने से पहले आंतरिक वस्तुओं को लपेटने की कोशिश करना चाहता हूं, जो कि डिफ़ॉल्ट रूप से क्या होता है इसके विपरीत लगता है। क्या इसे करने का कोई तरीका है?

संपादित करें: दृश्य स्पष्टीकरण के लिए अनुरोध थे।

2 कई आइटम के साथ कंटेनर प्रत्येक:

वांछित व्यवहार, थोड़ा छोटा। सबसे पहले आइटम अपने कंटेनर से पहले लपेटें।

वांछित व्यवहार, छोटे अभी भी।

वांछित व्यवहार, सबसे छोटी। अंदरूनी वस्तुओं के बाद और भी लपेट नहीं सकते हैं, अंत में कंटेनर लपेटें।

क्या वास्तव में होता है: कंटेनर उनकी सामग्री से पहले लपेट दें।

Answer 1

मैं नहीं मानता कि किसी भी फ्लेक्स गुण है कि इस प्रक्रिया को सरल और आसान बनाने के देखते हैं। हालांकि, फ्लेक्सबॉक्स विनिर्देश absolutely-positioned flex children के लिए अनुमति देता है। तो मीडिया प्रश्नों और पूर्ण स्थिति के संयोजन के साथ, कंटेनर के अंदर फ्लेक्स आइटम को कंटेनर स्वयं लपेटने से पहले लपेटने के लिए बनाया जा सकता है।

इस प्रयास करें:

एचटीएमएल (कोई बदलाव नहीं)

सीएसएस (मीडिया प्रश्नों और पूर्ण स्थिति को जोड़ने)

#second { position: relative; } 
/* establishes nearest positioned ancestor for absolute positioning */ 

@media screen and (max-width: 1000px) { 
    #second widget:nth-child(3) { 
     position: absolute; 
     left: 0; 
     bottom: 0; 
     width: 90%; } 
    } 

@media screen and (max-width: 800px) { 
    #second { height: 375px; } 
    #second widget:nth-child(2) { 
     position: absolute; 
     left: 0; 
     bottom: 127px; 
     width: 75%; } 
    #second widget:nth-child(3) { 
     position: absolute; 
     left: 0; 
     bottom: 0; 
     width: 75%; } 
    } 

/* final media query removes absolute positioning and restores flex properties */  
@media screen and (max-width: 600px) { 
    column, row, widget { flex-wrap: wrap; } 
    #second widget { 
     position: static; 
     width: calc(25% - 3em); 
     min-width: 300px; 
    } 

Revised Codepen

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