Flexbox：如何將行的元素拉伸到全寬？

Question

我有隨機寬度圖像的Flexbox的網格：

我想伸展到全寬各行的元素，以擺脫白色空間 - 我怎麼能做到這一點與CSS ？
justify-content似乎沒有多大幫助。我已閱讀了一些JavaScript技術，但如果可能的話，我想避免它。

[編輯]預期結果：example

.grid { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: center; 
 
} 
 
.grid .grid-item { 
 
    width: auto; 
 
    display: inline-block; 
 
    vertical-align: bottom; 
 
    float: none; 
 
    margin: 1px; 
 
    overflow: hidden; 
 
} 
 
.grid .grid-item .grid-in { 
 
    padding: 0; 
 
    width: auto; 
 
    height: 190px; 
 
    vertical-align: bottom; 
 
} 
 
.grid img { 
 
    max-width: 100%; 
 
    width: 100%; 
 
    height: auto; 
 
    padding: 0; 
 
}

<div class="grid"> 
 
    <div class="grid-item"> 
 
    <div class="grid-in"> 
 
     <img src="http://placehold.it/190x190" alt=""> 
 
    </div> 
 
    </div> 
 
    <div class="grid-item"> 
 
    <div class="grid-in"> 
 
     <img src="http://placehold.it/250x190" alt=""> 
 
    </div> 
 
    </div> 
 
    <div class="grid-item"> 
 
    <div class="grid-in"> 
 
     <img src="http://placehold.it/100x190" alt=""> 
 
    </div> 
 
    </div> 
 
    <div class="grid-item"> 
 
    <div class="grid-in"> 
 
     <img src="http://placehold.it/190x190" alt=""> 
 
    </div> 
 
    </div> 
 
    <div class="grid-item"> 
 
    <div class="grid-in"> 
 
     <img src="http://placehold.it/250x190" alt=""> 
 
    </div> 
 
    </div> 
 
    <div class="grid-item"> 
 
    <div class="grid-in"> 
 
     <img src="http://placehold.it/190x190" alt=""> 
 
    </div> 
 
    </div> 
 
    <div class="grid-item"> 
 
    <div class="grid-in"> 
 
     <img src="http://placehold.it/100x190" alt=""> 
 
    </div> 
 
    </div> 
 
    <div class="grid-item"> 
 
    <div class="grid-in"> 
 
     <img src="http://placehold.it/190x190" alt=""> 
 
    </div> 
 
    </div> 
 
    <div class="grid-item"> 
 
    <div class="grid-in"> 
 
     <img src="http://placehold.it/250x190" alt=""> 
 
    </div> 
 
    </div> 
 
    <div class="grid-item"> 
 
    <div class="grid-in"> 
 
     <img src="http://placehold.it/190x190" alt=""> 
 
    </div> 
 
    </div> 
 
    <div class="grid-item"> 
 
    <div class="grid-in"> 
 
     <img src="http://placehold.it/100x190" alt=""> 
 
    </div> 
 
    </div> 
 

 
</div>

Answer 1

第一圍在容器中的每一行，說.grid-row，這將有您以前分配給.grid那些Flexbox的性能。

現在設置flex-grow屬性爲每個單元格，值可以是任何值，只要比率爲的每行值是正確的。您可以簡單地將其設置爲單元格的寬度（不帶單位），因此第一個單元格將具有flex-grow: 190。此外，請務必在所有.grid-item s上設置flex-shrink至1以避免this flexbug。

要使圖像一直拉伸，請從.grid-in中刪除所有inline-block業務。並且要使它們按比例增加高度，而不是被裁剪爲190px，請從.grid-in刪除width: 190px。

最後，空間出來，在這種情況下，最好對.grid-in上.grid-item，而不是margin: 1px使用padding: 1px。

由於演示版本不夠低，爲了清楚起見，我對其進行了清理。希望你會知道如何在原始代碼中實現它。

.grid-row { 
 
    display: flex; 
 
} 
 

 
.grid-item { 
 
    flex-shrink: 1; 
 
    padding: 1px; 
 
} 
 

 
.grid-row:nth-child(1) .grid-item:nth-child(1) { flex-grow: 190; } 
 
.grid-row:nth-child(1) .grid-item:nth-child(2) { flex-grow: 250; } 
 
.grid-row:nth-child(1) .grid-item:nth-child(3) { flex-grow: 100; } 
 

 
.grid-row:nth-child(2) .grid-item:nth-child(1) { flex-grow: 190; } 
 
.grid-row:nth-child(2) .grid-item:nth-child(2) { flex-grow: 250; } 
 
.grid-row:nth-child(2) .grid-item:nth-child(3) { flex-grow: 190; } 
 

 
.grid-row:nth-child(3) .grid-item:nth-child(1) { flex-grow: 100; } 
 
.grid-row:nth-child(3) .grid-item:nth-child(2) { flex-grow: 190; } 
 
.grid-row:nth-child(3) .grid-item:nth-child(3) { flex-grow: 250; } 
 

 
.grid-row:nth-child(4) .grid-item:nth-child(1) { flex-grow: 190; } 
 
.grid-row:nth-child(4) .grid-item:nth-child(2) { flex-grow: 100; } 
 
.grid-row:nth-child(4) .grid-item:nth-child(3) { flex-grow: 190; } 
 

 
.grid img { 
 
    width: 100%; 
 
    height: auto; 
 
    vertical-align: middle; 
 
}

<div class="grid"> 
 
    <div class="grid-row"> 
 
    <div class="grid-item"> 
 
     <div class="grid-in"> 
 
     <img src="http://placehold.it/190x190" alt=""> 
 
     </div> 
 
    </div> 
 
    <div class="grid-item"> 
 
     <div class="grid-in"> 
 
     <img src="http://placehold.it/250x190" alt=""> 
 
     </div> 
 
    </div> 
 
    <div class="grid-item"> 
 
     <div class="grid-in"> 
 
     <img src="http://placehold.it/100x190" alt=""> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="grid-row"> 
 
    <div class="grid-item"> 
 
     <div class="grid-in"> 
 
     <img src="http://placehold.it/190x190" alt=""> 
 
     </div> 
 
    </div> 
 
    <div class="grid-item"> 
 
     <div class="grid-in"> 
 
     <img src="http://placehold.it/250x190" alt=""> 
 
     </div> 
 
    </div> 
 
    <div class="grid-item"> 
 
     <div class="grid-in"> 
 
     <img src="http://placehold.it/190x190" alt=""> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="grid-row"> 
 
    <div class="grid-item"> 
 
     <div class="grid-in"> 
 
     <img src="http://placehold.it/100x190" alt=""> 
 
     </div> 
 
    </div> 
 
    <div class="grid-item"> 
 
     <div class="grid-in"> 
 
     <img src="http://placehold.it/190x190" alt=""> 
 
     </div> 
 
    </div> 
 
    <div class="grid-item"> 
 
     <div class="grid-in"> 
 
     <img src="http://placehold.it/250x190" alt=""> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="grid-row"> 
 
    <div class="grid-item"> 
 
     <div class="grid-in"> 
 
     <img src="http://placehold.it/190x190" alt=""> 
 
     </div> 
 
    </div> 
 
    <div class="grid-item"> 
 
     <div class="grid-in"> 
 
     <img src="http://placehold.it/100x190" alt=""> 
 
     </div> 
 
    </div> 
 
    <div class="grid-item"> 
 
     <div class="grid-in"> 
 
     <img src="http://placehold.it/190x190" alt=""> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

我也碰到這個問題，迷迷糊糊地利用Flexbox，就遺憾的是沒能解決它。 答案可能會讓你大吃一驚，但我發現這裏適合我的是一張桌子，是的，你聽到我說的對，<table>！

有幾個約束要記住：

1. 你應該知道你想在每行單元格/列數。
2. 在列的每一行都有不同寬度的情況下，每行都需要一個表格元素。 （'成員2000s？）

table { 
 
    width: 100%; 
 
    margin: 0 0 10px 0; 
 
    padding: 0; 
 
    border-collapse: collapse; 
 
} 
 

 
table td { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
img { 
 
    display: block; 
 
    width: 100%; 
 
    max-width: 100%; 
 
}

<table> 
 
    <tr> 
 
    <td> 
 
     <img src="http://placehold.it/190x190" alt=""> 
 
    </td> 
 
    <td> 
 
     <img src="http://placehold.it/250x190" alt=""> 
 
    </td> 
 
    <td> 
 
     <img src="http://placehold.it/100x190" alt=""> 
 
    </td> 
 
    </tr> 
 
</table> 
 

 
<table> 
 
    <tr> 
 
    <td> 
 
     <img src="http://placehold.it/190x190" alt=""> 
 
    </td> 
 
    <td> 
 
     <img src="http://placehold.it/250x190" alt=""> 
 
    </td> 
 
    <td> 
 
     <img src="http://placehold.it/190x190" alt=""> 
 
    </td> 
 
    </tr> 
 
</table> 
 

 
<table> 
 
    <tr> 
 
    <td> 
 
     <img src="http://placehold.it/100x190" alt=""> 
 
    </td> 
 
    <td> 
 
     <img src="http://placehold.it/190x190" alt=""> 
 
    </td> 
 
    <td> 
 
     <img src="http://placehold.it/250x190" alt=""> 
 
    </td> 
 
    </tr> 
 
</table> 
 

 
<table> 
 
    <tr> 
 
    <td> 
 
     <img src="http://placehold.it/190x190" alt=""> 
 
    </td> 
 
    <td> 
 
     <img src="http://placehold.it/100x190" alt=""> 
 
    </td> 
 
    <td> 
 
     <img src="http://placehold.it/190x190" alt=""> 
 
    </td> 
 
    </tr> 
 
</table>

您還可以使用其他HTML元素，並使用CSS
display: table | table-row | table-cell