Css 在flex项上显示表格

我的问题很简单。是否可以在flex项目上显示：表格

当我在一个项目上设置它时，布局没有按预期工作-第二个flex项目没有抓住可用的垂直/水平空间

.parent{
最小高度：200px；
边框：1px纯黑；
显示器：flex；
弯曲方向：立柱；
文本对齐：居中；
}
.标题{
背景颜色：灰色；
}
.内容{
弹性：1；
显示：表格；
背景色：红色；
}
.content>span{
显示：表格单元格；
垂直对齐：中间对齐；
}

标题
主要内容

表格是行或水平方向的，所以如果放在flex列中，不会得到奇怪的结果吗？我把所有的东西都换成了一个很好的老街区，它们很好地堆叠在一个柱状流中——垂直和谐

.content

是死点，使用：

位置：相对顶部：50%和
translateY（360%）用于垂直和
文本对齐：居中用于水平方向。哦，当然，把这个跨度变成一个有用的块

更改如下：

.content {
  flex: 1;
  background-color: red;
}
.content > span {
  display: block;
  position: relative;
  top: 50%;
  transform: translateY(360%);
  text-align: center;
}

我将
display:table
更改为
table row
这是您想要的吗


.parent{
最小高度：200px；
边框：1px纯黑；
显示器：flex；
弯曲方向：立柱；
文本对齐：居中；
}
.标题{
背景颜色：灰色；
}
.内容{
弹性：1；
背景色：红色；
}
.content>span{
显示：块；
位置：相对位置；
最高：50%；
转化：translateY（360%）；
文本对齐：居中；
}

标题
主要内容
为什么要在flexbox中使用表是个大问题。。。
但您可以设置表的宽度，并从父级继承最小高度


.parent{
最小高度：200px；
边框：1px纯黑；
显示器：flex；
弯曲方向：立柱；
文本对齐：居中；
}
.标题{
背景颜色：灰色；
}
.内容{
显示：表格；
弹性：1；
背景色：红色；
宽度：100%；
最小高度：继承；
}
.content>span{
显示：表格单元格；
垂直对齐：中间对齐；
身高：100%；
}

标题
主要内容
在这里您根本不需要使用表格布局。只需添加
align self:center至
.content->span{…
。并通过将
display:flex
添加到
.content
元素，使
span
元素也成为弹性项。表格布局不适用于您的原因是
垂直对齐
对弹性项的对齐没有影响。因此，通过更改flex项的显示属性似乎不是一个好主意，因为您正在失去flex布局的灵活性


由于柔性箱使用不同的布局算法，因此某些属性在柔性容器上没有意义：

列-*多列模块的属性对弹性项没有影响。
float和clear对弹性项没有影响。使用float会导致元素的显示属性计算阻塞。
垂直对齐对弹性项目的对齐没有影响


.parent{
最小高度：200px；
边框：1px纯黑；
显示器：flex；
弯曲方向：立柱；
文本对齐：居中；
}
.标题{
背景颜色：灰色；
}
.内容{
弹性：1；
显示器：flex；
背景色：红色；
}
.content>span{
弹性：1；
自对准：居中；
}

标题
主要内容
当然可以，但不一定是一个好的解决方案

我建议您一直使用
flex


.parent{
最小高度：200px；
边框：1px纯黑；
显示器：flex；
弯曲方向：立柱；
文本对齐：居中；
}
.标题{
背景颜色：灰色；
}
.内容{
弹性：1；
背景色：红色；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}

标题
主要内容
我不确定我是否理解你的问题，但这就是你要找的for@DavidDomain不，“主要内容”跨度不在垂直方向居中不，“主要内容”跨度不在垂直方向居中，请查看我的问题中的
垂直对齐：中间；
。不确定这是否是您想要的。我疯了e一个编辑。你基本上只需要将
span
也变成一个flex项，方法是将
display:flex
添加到
.content
元素中。是的，与我从@LGSon得到的解决方案相同。但我的问题不是如何实现布局，而是为什么display:table会破坏flexbox布局。检查编辑。这里有一些建议对flex项目没有影响的erties。不，我需要红色div来获取所有可用空间，“主要内容”跨度在两个方向上居中。你说的所有可用空间是什么意思？它占用了
的剩余空间。parent
这很好，我使用它。但是我不能使用显示表，正如你在我的问题中看到的。我的问题是为什么？为什么它会破坏flexbox布局？@Behnil表格元素很特殊，不像普通的块或内联元素那样工作。要使其与
display:table
一起工作，您需要为父级和表格设置一个高度……很快就会发布一个示例。@Behnil这是一个可以工作的示例，正如您所看到的，这个示例仍然可以工作桌子高度是200px，因为
flex
在限制高度方面有一些缺陷。下面是我的另一个答案，展示了
flex
不起作用时的另一个解决方法：@Behnil我更新了我的答案，一个附带注释，其中包含了我的注释，希望能给你一个问题的答案，正如你所看到的，它不是
display:table
打破了你的
flex
，是
flex
打破了