在弹性项目上显示表格 [英] Display table on flex item

问题描述

我的问题很简单.弹性项目上可能有display:table吗?

My question is simple. Is it possible to have display: table on a flex item?

当我将其设置在项目上时，布局无法按预期工作-第二个弹性项目无法获取可用的垂直/水平空间.

When I set it on an item, the layout doesn't work as expected - the second flex item doesn't grab the available vertical/horizontal space.

.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>

推荐答案

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

Of course you can, but not necessarily a good solution though.

我可以建议您一直使用flex.

May I suggest you use flex all the way.

.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元素是特殊元素，不能用作普通的块或内联元素.要使其与display: table一起使用，您需要为父级以及table设置高度，例如在此示例中， http://jsfiddle.net/LGSon/0bzewkf4 .

A table element is special and doesn't behave as normal block or inline elements. To make it work with display: table, you need to set a height to your parent as well as to the table, like in this sample, http://jsfiddle.net/LGSon/0bzewkf4.

仍然可以看到，table的高度为200px，因为flex在限制高度时存在一些缺陷，因此不是display:table会破坏您的flex，它是flex谁有点坏.

Still, as you can see, the table height is 200px because flex has some flaws when it comes to limit height's, so it is not display:table that breaks your flex, it is flex who is somewhat broken.

这是我的另一个答案，显示了flex不起作用的另一种解决方法:

Here is another answer of mine, showing yet another workaround where flex doesn't behave: Normalizing Flexbox overflow in IE11

这篇关于在弹性项目上显示表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！