嵌套的Flexbox行最長元素的寬度

我想使用flexbox複製表的行爲，以獲得更好的可預測性和控制。 Here's a codepen of what I have currently.嵌套的Flexbox行最長元素的寬度

這裏的SCSS：

.flex-table 
    display: flex 
    flex-direction: column 
    flex-wrap: nowrap 

.flex-table-row 
    display: flex 
    flex-direction: row 
    flex-wrap: nowrap 

.flex-table-item 
    flex-basis: 0 
    flex-grow: 1 

.flex-table-item > :nth-child(3n + 3) 
    border: 1px solid red 
    flex-grow: 0 
    white-space: nowrap

我的問題是，我怎麼能得到每個元素的寬度在一列佔用其內容的寬度或最大的元素在寬度專欄，以較大者爲準？

這裏是什麼，我有一個形象：

我想的Header 3框等於另外兩個元素的寬度。此外，如果Content 2-2或Content 3-2增長，我希望所有列都擴展爲具有與最大列相同的寬度，類似於表。我知道我可以用min-width部分地做到這一點，但我想要一種適用於任何寬度的動態內容的方法。

來源

2016-01-01 0xcaff

@AlvaroJoao我試過使用'min-width'和'flex-grow：1'，但'min-width'不適用於動態內容，'flex-grow：1'佔用最大可用空間空間。 – 0xcaff

您可能必須更改結構... flexbox不是表格的替代品。 –

@Paulie_D如果有一種方法與固定的表格有相同的效果（列佔用列中最寬元素的內容寬度或寬度以及填充剩餘空間的其他列），請填寫我並且我將永遠感激。 – 0xcaff

在一天結束時，要做到這一點（使用flexboxes），下面的標題和內容將需要按列分組，而不是現在所有標題都在同一行中的方式。我相信我提到的方式反而更有意義，但也許你需要不同的東西。我正在描述的JSFiddle。如您所見，每個列中的每個元素都將動態調整爲該列中最大元素的寬度。另外，flex-basis：0可以確保每列的大小調整到與最大列相同的寬度。如果一列的寬度調整大小，他們都會這樣做。

真的，我所做的是開關從行到列：

.flex-table-column { 
    display: flex; 
    flex-direction: column; 
    flex-wrap: nowrap; 
}

讓我知道，如果你有疑問，或如果我錯過了標記。

來源

2016-01-03 04:52:44

它的工作原理如果你添加'white-space：nowrap'和'flex-grow：0'到你想展示行爲的列。這是一個很好的答案，但我不能使用它，因爲flex-table使用angular2填充，而使用行而不是列需要運行昂貴的過濾器以運行5次。 – 0xcaff

對不起！這是我能想到的唯一純CSS的方式。你會考慮使用JavaScript/jQuery的解決方案嗎？ –

嵌套的Flexbox行最長元素的寬度

回答

相關問題