向媒體查詢中的嵌套彈性容器添加一行

Question

我有一個主容器使用flex-direction行保存所有div。

嵌套的第二個容器包含兩個div，它們的列爲flex-direction，以將兩個div s堆疊在外部容器中的一行中。

使用flex-box和媒體查詢，一旦瀏覽器寬度小於1000px，我試圖將現有的兩行的列div'小容器'更改爲三行的列div。

我試圖通過內smaller-container創建第三空div和用較小的容器外一個div交換其順序這樣做，一旦瀏覽器寬度小於1000像素。

它沒有工作。我認爲這是因爲有問題的兩個div（空白div和外部div）處於不同的嵌套級別。

如果有人能找到解決方案將一列中的兩行變成一列中的三行，那將是非常好的。

更好的是，如果該解決方案不需要嵌套容器。如果Javascript解決方案不需要插件，也歡迎使用Javascript解決方案。

形象應該如何看待：

/*Basic Reset*/ 
 

 
* { 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
html, 
 
body { 
 
    height: 100%; 
 
} 
 
body { 
 
    max-width: 1366px; 
 
    margin: auto; 
 
    width: 100%; 
 
} 
 
.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    flex-direction: row; 
 
} 
 
.box-1 { 
 
    order: 1; 
 
    background-color: red; 
 
    height: 150px; 
 
    width: 50%; 
 
} 
 
.smaller-container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    flex-direction: column; 
 
    width: 50%; 
 
    order: 2; 
 
} 
 
.box-2 { 
 
    order: 3; 
 
    background-color: blue; 
 
    height: 75px; 
 
    width: 100%; 
 
} 
 
.box-3 { 
 
    order: 4; 
 
    background-color: green; 
 
    height: 75px; 
 
    width: 100%; 
 
} 
 
.box-4 { 
 
    order: 5; 
 
    width: 100%; 
 
} 
 
.box-5 { 
 
    order: 6; 
 
    background-color: orange; 
 
    height: 150px; 
 
    width: 100%; 
 
} 
 
@media screen and (max-width: 1000px) { 
 
    .box-2 { 
 
    height: 50px; 
 
    } 
 
    .box-3 { 
 
    height: 50px; 
 
    } 
 
    /******* Here we swap the empty div that hasbeen existing in the smaller container 
 
     with an outer div ********/ 
 
    .box-5 { 
 
    order: 5; 
 
    height: 50px; 
 
    } 
 
    .box-4 { 
 
    order: 6; 
 
    background-color: purple; 
 
    height: 150px; 
 
    } 
 
} 
 
[image of desired solution][1] [1]:http://i.stack.imgur.com/vlvlx.png

<div class="container"> 
 
    <div class="box-1"></div> 
 
    <div class="smaller-container"> 
 
    <div class="box-2"></div> 
 
    <div class="box-3"></div> 
 
    <div class="box-4"></div> 
 
    </div> 
 
    <div class="box-5"></div> 
 
</div>

https://jsfiddle.net/lukindo/nuv603h9/1/

Answer 1

嗯，你說得對，在order屬性不會在不同的工作嵌套級別。 It only works among siblings。

腳本是您可以追求的一種選擇。另一個有點駭人的是複製一個HTML元素。具體而言，將橙色框元素（.box-5）放置在主要容器和嵌套容器中。

然後使用display: none在每個媒體查詢的橙色和紫色框中。

下面是一個例子：

* { 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
html, 
 
body { 
 
    height: 100%; 
 
} 
 
body { 
 
    max-width: 1366px; 
 
    margin: auto; 
 
    width: 100%; 
 
} 
 
.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    flex-direction: row; 
 
} 
 
.box-1 { 
 
    order: 1; 
 
    background-color: red; 
 
    height: 150px; 
 
    width: 50%; 
 
} 
 
.smaller-container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    flex-direction: row; 
 
    width: 50%; 
 
    order: 2; 
 
} 
 
.box-2 { 
 
    order: 3; 
 
    background-color: blue; 
 
    height: 75px; 
 
    width: 100%; 
 
} 
 
.box-3 { 
 
    order: 4; 
 
    background-color: green; 
 
    height: 75px; 
 
    width: 100%; 
 
} 
 
.smaller-container > .box5 { 
 
    display: none; 
 
} 
 
.container > .box-5 { 
 
    order: 6; 
 
    background-color: orange; 
 
    height: 150px; 
 
    width: 100%; 
 
} 
 
@media screen and (max-width: 1000px) { 
 
    .box-2 { 
 
    height: 50px; 
 
    } 
 
    .box-3 { 
 
    height: 50px; 
 
    } 
 
    .container > .box-4 { 
 
    order: 6; 
 
    background-color: purple; 
 
    height: 150px; 
 
    width: 100%; 
 
    } 
 
    .smaller-container > .box-5 { 
 
    display: block; 
 
    height: 50px; 
 
    background-color: orange; 
 
    width: 100%; 
 
    order: 6; 
 
    } 
 
    .container > .box-5 { 
 
    display: none; 
 
    } 
 
}

<div class="container"> 
 
    <div class="box-1"></div> 
 
    <div class="smaller-container"> 
 
    <div class="box-2"></div> 
 
    <div class="box-3"></div> 
 
    <div class="box-5"></div> 
 
    </div> 
 
    <div class="box-4"></div> 
 
    <div class="box-5"></div> 
 
</div>

Revised Fiddle