CSS Flexbox div自動更改訂單以填充空白空間

我有一個具有相同固定高度和固定寬度div的網格佈局，並且我需要在此網格線之間插入一個更大的div而不會打破流動， HTML位置。這裏是我的HTML：CSS Flexbox div自動更改訂單以填充空白空間

<div class="small"></div> 
<div class="small"></div> 
<div class="small"></div> 
<div class="big"></div> 
<div class="small"></div> 
<div class="small"></div> 
<div class="small"></div> 
<div class="small"></div> 
<div class="small"></div> 
<div class="small"></div>

而且我想要的佈局，用的div的HTML命令：

的主要問題是敏感行爲，因爲我不知道連續有多少個元素。我的第一個想法是使用JS來放置大div，但它不可靠，不乾淨。

我可以用JS改變div的flex順序，但是一個完整的css代碼肯定會更好。

來源

2016-01-08 T. Boulongne

你的問題並不完全清楚。一個例子：* ...沒有打破流動，隨着HTML的位置.. *如果你可以提供更多的細節，也許一個具體的問題，這將有所幫助。 –

如果您事先不知道'big' div在其父代中的哪個索引，則需要腳本來解決此問題。 – LGSon

究竟是什麼問題？ – Oriol

經過一番思考，我想出了這個，沒有腳本。

它使用媒體查詢，你需要做一些自己的計算，根據你的要求設置所有的寬度。

這裏有a fiddle，它有兩個組，每個組有不同的big，它們具有相同的CSS，顯示了一種可能適用於您的方式，但在代碼片段下面，只有一組。

.parent { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    min-width: 400px; 
 
} 
 
.parent div { 
 
    border: 1px solid black; 
 
    margin: 5px; 
 
    order: 1; 
 
} 
 
.parent div:before { 
 
    content: attr(data-nr); 
 
} 
 
.parent .small { 
 
    width: 80px; 
 
    height: 50px; 
 
} 
 
.parent .big { 
 
    width: 90vw; 
 
    height: 100px; 
 
    min-width: 400px; 
 
    order: 2; 
 
} 
 
.parent .big ~ .small { 
 
    border-color: red; 
 
    order: 3; 
 
} 
 
.parent .big ~ div:nth-of-type(n+0) { 
 
    order: 1; 
 
} 
 

 
@media screen and (max-width: 900px) { 
 
    .parent .big ~ .small:nth-of-type(n+10) { 
 
    order: 3; 
 
    } 
 
} 
 
@media screen and (max-width: 800px) { 
 
    .parent .big ~ .small:nth-of-type(n+9) { 
 
    order: 3; 
 
    } 
 
} 
 
@media screen and (max-width: 700px) { 
 
    .parent .big ~ .small:nth-of-type(n+8) { 
 
    order: 3; 
 
    } 
 
} 
 
@media screen and (max-width: 600px) { 
 
    .parent .big ~ .small:nth-of-type(n+7) { 
 
    order: 3; 
 
    } 
 
} 
 
@media screen and (max-width: 500px) { 
 
    .parent .big ~ .small:nth-of-type(n+6) { 
 
    order: 3; 
 
    } 
 
}

<div class="parent"> 
 
    <div class="small" data-nr="1"></div> 
 
    <div class="small" data-nr="2"></div> 
 
    <div class="small" data-nr="3"></div> 
 
    <div class="big" data-nr="4"></div> 
 
    <div class="small" data-nr="5"></div> 
 
    <div class="small" data-nr="6"></div> 
 
    <div class="small" data-nr="7"></div> 
 
    <div class="small" data-nr="8"></div> 
 
    <div class="small" data-nr="9"></div> 
 
    <div class="small" data-nr="10"></div> 
 
</div>

來源

2016-01-08 14:15:46 LGSon

CSS Flexbox div自動更改訂單以填充空白空間

回答

相關問題