Html Flexbox大小的子表单元格？

我面临Flexbox的一个问题。我尝试了很多变体，但没有找到解决方案

我需要使用父容器拉伸子元素

第一行的宽度可以，但背景也应根据内容进行拉伸

关于第二行，背景拉伸是好的，但它需要相等的宽度，我需要的宽度取决于内容，如自动宽度

我需要它像在变体3中使用

display:table

时一样拉伸

.row{
显示器：flex；
证明内容：周围的空间；
利润率：20px；
颜色：#fff；
}
.路.山口{
最小高度：40px；
背景：#333；
填充：10px；
}
.row-v2{
柔性包装：包装；
}
.row-v2.col{
弹性：1；
}
.行表{
宽度：100%；
显示：表格；
}
.col:n个孩子（2）{
背景:#666；
}
.行表.列{
显示：表格单元格；
填充：10px；
背景：#333；
颜色：#fff；
}

变体1
测试
测试1234
E
变式2
测试
测试1234
T
表法变量
测试
Lorem ipsum dolor sit amet，奉献精英。多洛尔，我是多洛雷姆库的建筑设计师，这是错误的！
Lorem ipsum dolor sit amet。

试试这个。我添加了

colmd auto

类及其css，如下所示：

.col-md-auto {
  -moz-box-flex: 1;
  flex:1 1 auto;
  width: auto;
}

.row{
显示器：flex；
利润率：20px；
颜色：#fff；
}
.路.山口{
最小高度：40px；
背景：#333；
填充：10px；
}
.row-v2{
柔性包装：包装；
}
.row-v2.col{
弹性：1；
}
.行表{
宽度：100%；
显示：表格；
}
.col:n个孩子（2）{
背景:#666；
}
.行表.列{
显示：表格单元格；
填充：10px；
背景：#333；
颜色：#fff；
}
.col md自动{
-moz-box-flex:1；
flex:1自动；
宽度：自动；
}

变体1
测试
Lorem ipsum dolor sit amet，奉献精英。多洛雷，我是多洛雷的建筑师
E
变式2
测试
测试1234
T
表法变量
测试
Lorem ipsum dolor sit amet，奉献精英。多洛尔，我是多洛雷姆库的建筑设计师，这是错误的！
Lorem ipsum dolor sit amet。

很难精确匹配，因为当

表格

分配可用空间时，它使用了与Flexbox不同的算法，下面可以找到

表格

工作原理的更深入解释：

---

简单地说，

表

使用每个单元格的内容大小来计算增长，其中Flexbox在计算增长之前先减去内容大小

因此，要匹配示例1/2中的文本，您需要提前知道flex项是否应该比另一个小一些

这里有3个示例，其中第一个使用相同的增长（

flex-grow:1

），第二个使用调整后的

堆栈片段

.row{
显示器：flex；
}
上校{
背景：#333；
填充：10px；
颜色：#fff；
}
.row-v1.col{
弹性增长：1；/*相等*/
}
.row-v2.列：第n个子项（1）{
弹性增长：1.6；/*调整*/
}
.row-v2.列：第n个子项（2）{
弹性增长：3；/*调整*/
}
.row-v2.列：第n个子项（3）{
弹性增长：1；/*调整*/
}
.行表{
显示：表格；
宽度：100%；
}
.行表.列{
显示：表格单元格；
}
.col:n个孩子（2）{
背景：#999；
}
h3{
保证金：5px；
}

Flex-equal
测试
测试1234
T
弹性调整
测试
测试1234
T
桌子
测试
测试1234
T

默认为

width:auto

，您可以删除它，Firefox删除了版本上的

moz

前缀。21（现在是56），如果仍要使用它，还需要在

display:flex

上添加前缀，否则它将不适用于那些旧版本谢谢。。我的意思不是确切的。。我只想让你充满激情auto@Kumar我猜到了，还是想提一下。另外，如果您打算使用多行，请查看我的建议，否则它将不起作用。是。。非常感谢您的澄清。现在我了解了浏览器是如何决定列宽的