Flexbox的網格：細胞不會增長

Question

我想基於Flexbox將創建一個網格佈局：

.container { 
 
    width: 360px; /* Try to change this. Possible values: 240px, 360px, 480px.*/ 
 
    background: #eee; 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    margin: 0 -10px; 
 
} 
 

 
.cell { 
 
    box-sizing: border-box; 
 
    padding: 10px; 
 
    flex: 0 0 120px; 
 
    max-width: 120px; 
 
} 
 

 
.cell.wide { 
 
    flex: 1 0 120px; 
 
    max-width: 240px; 
 
} 
 

 
.inner { 
 
    background: red; 
 
    height: 100px; 
 
    color: #fff; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
} 
 

 
.wide .inner { 
 
    background: blue; 
 
}

<div class="container"> 
 
    <div class="cell"> 
 
    <div class="inner">1</div> 
 
    </div> 
 
    <div class="cell wide"> 
 
    <div class="inner">2</div> 
 
    </div> 
 
    <div class="cell"> 
 
    <div class="inner">3</div> 
 
    </div> 
 
    <div class="cell"> 
 
    <div class="inner">4</div> 
 
    </div> 
 
    <div class="cell wide"> 
 
    <div class="inner">5</div> 
 
    </div> 
 
    <div class="cell"> 
 
    <div class="inner">6</div> 
 
    </div> 
 
    <div class="cell wide"> 
 
    <div class="inner">7</div> 
 
    </div> 
 
    <div class="cell"> 
 
    <div class="inner">8</div> 
 
    </div> 
 
    <div class="cell"> 
 
    <div class="inner">9</div> 
 
    </div> 
 
    <div class="cell"> 
 
    <div class="inner">10</div> 
 
    </div> 
 
    <div class="cell"> 
 
    <div class="inner">11</div> 
 
    </div> 
 
    <div class="cell wide"> 
 
    <div class="inner">12</div> 
 
    </div> 
 
    <div class="cell"> 
 
    <div class="inner">13</div> 
 
    </div> 
 
</div>

This JSFiddle有助於說明我的問題。

容器元素.container可以包含任意數量的單元格.cell。有兩種類型的單元格：固定寬度的常規單元格（jsfiddle中的紅色單元格）和寬度較大的單元格（藍色單元格），寬度是其寬度的兩倍，但可以縮小到普通單元格的寬度（如果存在）當前行中沒有足夠的空間。每行必須完全填充。

所以在實施例（見小提琴）：

• 細胞＃2應寬和推＃3到下一行。
• 在第二行中，其然後包含＃3，＃4和＃5，細胞＃5應保持小，因爲沒有空間用於較大的細胞和行應該被完全填充。
• 等

順便說：網格容器是可變的寬度，並且因此行可以兩個和四個小區之間包含。您可以通過將寬度更改爲指定的可能值來在小提琴中嘗試此操作。

在撥弄試圖圍繞整個上午和嘗試flex，width，min-width和max-width性能我絕對需要你幫助的衆多組合後！提前致謝！

我已經有一個Javascript解決方法（計算列和添加類），但會更喜歡一個純CSS的解決方案。

Answer 1

我相信答案是您所尋找的是Flexbox無法實現的。其原因是，在上漿算法（以簡化的術語）使用幾個步驟以確定所述元件的實際尺寸：

1. 確定優選的最小尺寸（flex-basis的值，如果設定爲長度/百分比，如果聲明爲主軸大小的值爲auto，則如果不是最小內容大小）。在你的情況下，.cell和.cell.wide都喜歡120px。
2. 將物品放置好像它們有首選尺寸。
3. 評價每個生成的行（在包裝彈性流程中）並確定任何剩餘空間。
4. 根據flex-grow分配剩餘空間（每行）。

在你的情況中，這意味着每個項目（如果無論.wide與否）將評估爲的120px一個優選的尺寸，並且因此適合於每行3項。在這一點上，flex-grow因素什麼都不做，因爲沒有剩餘空間可以增長，所以.wide項目的flex-grow爲1的事實是不相關的。我認爲你的例子需要的形式是「有時min-width，有時候不行」，flexbox不會這麼做 - 瀏覽器可能會有太多佈局傳遞（例如，多次重複排隊等）。

唯一的基於CSS的解決方案，我能想到的是硬編碼到"Quantity Queries"一個類似於所有可能的方案，但會得到快速笨拙...

最近我可以得到Flexbox的是一樣的東西https://jsfiddle.net/qde5xq09/1/ 。