嵌套的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行最长元素的宽度

回答

相关问题