css - 在 flex 元素上显示表格

Question

我的问题很简单。是否可以在 flex 元素上显示:表格？

当我在一个元素上设置它时，布局没有按预期工作——第二个 flex 元素没有占用可用的垂直/水平空间。

.parent {
  min-height: 200px;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.header {
  background-color: gray;
}

.content {
  flex: 1;
  display: table;
  background-color: red;
}

.content > span {
  display: table-cell;
  vertical-align: middle;
}
  

<div class="parent">
  <div class="header">
    <span>Header</span>
  </div>
  <div class="content">
    <span>Main content</span>
  </div>
</div>

Answer 1

当然可以，但不一定是好的解决方案。

我可以建议你一直使用flex。

.parent {
  min-height: 200px;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.header {
  background-color: gray;
}

.content {
  flex: 1;
  background-color: red;  
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="parent">
  <div class="header">
    <span>Header</span>
  </div>
  <div class="content">
    <span>Main content</span>
  </div>
</div>

---

旁注:

table 元素很特殊，不像普通的 block 或内联元素。要使其与 display:table 一起使用，您需要为父级和 table 设置高度，如本例中的 http://jsfiddle.net/LGSon/0bzewkf4 .

不过，如您所见，table 高度为 200px，因为 flex 在限制高度方面存在一些缺陷，所以它不是 display: table 破坏了你的 flex，是 flex 有点坏了。

这是我的另一个答案，展示了另一种解决方法，其中 flex 不正常:Normalizing Flexbox overflow in IE11