Display table on flex item

问题

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>

回答1:

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

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>

Side note:

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.

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.

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

回答2:

It's a big question why you use table in flexbox... But you can set width to your table and inherit min-height from parent

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

.header {
  background-color: gray;
}

.content {
  display: table;
  flex:1;
  background-color: red;
  width:100%;

min-height:inherit; 
}

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

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

回答3:

You should not need to use a table layout at all here. Just add align-self: center; to .content- > span {.... And make the span element become a flex item as well, by adding display:flex to the .content element. The reason why the table layout is not working for you is because vertcal-align has no effect on the alignment of flex items. So mixing a flex-layout with a table-layout by changing the display property of a flex-item seems not to be a good idea, because you are loosing the flexibility of the flex-layout.

Properties not affecting flexible boxes

Because flexible boxes use a different layout algorithm, some properties do not make sense on a flex container:

column-* properties of the multiple column module have no effect on a flex item. float and clear have no effect on a flex item. Using float causes the display property of the element to compute to block. vertical-align has no effect on the alignment of flex items.

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

.header {
  background-color: gray;
}

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

.content > span {
  flex: 1;
  align-self: center;
}

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

回答4:

Tables are row or horizontally oriented so wouldn't you get weird results if placed within a flex-column? I changed everything to a good old block, they stack very well in a column flow--vertical harmony.

.content is dead center by using: position: relative; top: 50%; and translateY(360%); for vertical and text-align: center; for horizontal. Oh and of course turning that span into a useful block.

Changed the following:

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

~~I changed display: table to table-row is this what you wanted?~~

.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;
}
.content > span {
  display: block;
  position: relative;
  top: 50%;
  transform: translateY(360%);
  text-align: center;
}

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

来源：https://stackoverflow.com/questions/35936383/display-table-on-flex-item

标签

css

flexbox