使用不同行上的內容控制Flexbox列寬

Question

我試圖使用Flexbox實現類似於表格的結構，因爲表格在上下文中很難控制，我試圖將它們放入並知道tr doesn在動畫和一些CSS風格上表現不錯，而且在多種瀏覽器和設備上都很不穩定。

看看這個小提琴：http://jsfiddle.net/68Lc86sg/

我想要做的就是最後兩列相同的寬度在所有的行，就像在表的例子。有沒有辦法使用flexbox來實現這一點？

Answer 1

Flexbox不是最合適的方法，因爲它沒有網格概念。

但是，您可以（或多或少）通過將所有網格單元放置在同一個柔性容器中，對它們重新排序並使用列布局來實現它。

dl { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    flex-direction: column; 
 
    margin: 0; 
 
    padding: 5px 0; 
 
    height: 4em; 
 
} 
 
dt, dd { 
 
    padding: 4px; 
 
    margin: 0; 
 
    flex: 0 1 50%; 
 
    min-height: 0; 
 
    border: 1px solid #888; 
 
    box-sizing: border-box; 
 
} 
 
dt { order: 1; } 
 
dt + dd { order: 2;} 
 
dt + dd + dd { order: 3; }

<dl> 
 
    <dt>Hotel 25</dt> 
 
    <dd>0 stars</dd> 
 
    <dd>0 ratings</dd> 
 
    <dt>Hotel 2254</dt> 
 
    <dd>1222 stars</dd> 
 
    <dd>124 ratings</dd> 
 
</dl>