在弹性项目上显示表格 [英] 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屋!