Konteynerler kendi ana kaplarına sarılmadan önce esnek öğeleri sarılmış esnek kaplar haline getirin

Question

Birden çok kapsayıcı içeren bir esnek kutunuz varsa, kapsayıcıların içerdiği öğelerin kapsayıcıların kendisinden önce sarılmasını nasıl sağlayabilirim? Örneğin (codepen) için

:

HTML

<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> 

CSS

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); 
} 

Ben #second kendisi #first aşağıda sarar önce #second öğeler sarmak istiyorum. Diğer bir deyişle, en dıştakileri sarmalamaya çalışmadan önce en içteki öğeleri sarmalamayı denemek isterim. Bu, varsayılan olarak ne olduğunun tersi gibi görünüyor. Bunu yapmanın bir yolu var mı?

DÜZENLEME: Görsel açıklama istekleri vardı. birkaç madde ile

2 konteyner her:

İstenilen davranış, biraz daha küçük. En içteki ürünler konteynerlerinden önce sarılır.

İstenilen davranış, küçük hala.

İstenilen davranış, en küçük. En içteki öğeler artık sarılmadan sonra, kaplar sonunda sarılır.

aslında ne olur: konteynerleri içerikleriyle önce sarın.

Answer 1

bu süreç basit ve kolay hale herhangi esnek özellikleri vardır inanmıyorum. Ancak, flexbox belirtimi absolutely-positioned flex children için izin verir. Dolayısıyla, medya sorguları ve mutlak konumlandırmanın bir birleşimiyle, konteynerin içindeki esnek parçalar, kabın kendisi sarılmadan önce sarılabilecektir.

bu deneyin:

HTML (değişiklik yok)

CSS (medya sorguları ve mutlak konumlandırma ekleyin)

#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

Not bu kod rağmen soruyu sorar –, kapsayıcının kabın kendisi –'u sarmadan önce kaplarına yerleştirir, sadece çözümün temel kavramını ifade eder.Bu sorunun kapsamı dışında düşündüğüm esnek mallar için marj ve genişlik gibi hususların ele alınması gerekebilir.