Question

我的问题很简单。是否可以在弹性项目上显示：table？

当我在项目上设置它时，布局不能按预期工作 - 第二个弹性项目不会抓住可用的垂直/水平空间。

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

＆＃13;

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

＆＃13;

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

＆＃13;

旁注：

table元素是特殊的，并不像普通的块或内联元素那样运行。要使其与display: table一起使用，您需要为父级和table设置高度，如此示例http://jsfiddle.net/LGSon/0bzewkf4中所示。

然而，正如您所看到的，table身高是200px，因为flex在限制身高时存在一些瑕疵，因此display:table不会突破你的flex，flex有点破碎。

以下是我的另一个答案，显示flex无法解决的另一种解决方法：Normalizing Flexbox overflow in IE11

Answer 2

表是行或水平方向的，如果放在flex-column中，你会不会得到奇怪的结果？我将所有东西都改成了一个很好的旧块，它们在柱流中非常好地堆叠 - 垂直和谐。

.content使用了position: relative; top: 50%;和translateY(360%);用于纵向，text-align: center;用于横向，

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

for(i in 2:nrow(df)){
        if(is.na(df[i,6]) == TRUE){
          score[i] = 0
          next
        }
        d = df[i, 3:32] == df[i-1, 3:32]
        if(all(d) == TRUE){
          score[i] = 0
          next
        }
        for(j in h){
          for(k in h)
        bidside = data.frame(DateTime=DateTime, Seq=Seq, BP1=BP1, BQ1=BQ1, BP2=BP2, BQ2=BQ2, BP3=BP3, BQ3=BQ3, BP4=BP4, BQ4=BQ4, BP5=BP5, BQ5=BQ5)
        askside = data.frame(DateTime=DateTime, Seq=Seq, AP1=AP1, AQ1=AQ1, AP2=AP2, AQ2=AQ2, AP3=AP3, AQ3=AQ3, AP4=AP4, AQ4=AQ4, AP5=AP5, AQ5=AQ5)
        x = askside[i, 3:12] == askside[i-1, 3:12]
        if(all(x) == TRUE){
          if(bidside[i,j] == bidside[i-1,k)
        }
      }

Answer 3

这是一个很大的问题，为什么你在flexbox中使用表... 但您可以设置表格的宽度并从父级继承最小高度

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

Answer 4

这里根本不需要使用表格布局。只需将align-self: center;添加到.content- > span {...即可。通过将span添加到display:flex元素，也可以使.content元素成为弹性项目。表格布局不适合您的原因是vertcal-align对Flex项目的对齐没有影响。因此，通过更改flex-item的显示属性来将flex-layout与table-layout混合似乎不是一个好主意，因为你正在失去flex-layout的灵活性。

Properties not affecting flexible boxes

由于灵活的盒子使用不同的布局算法，因此某些属性在flex容器上没有意义：
     多列模块的
列 - * 属性对弹性项目没有影响。   浮动和清除对Flex项目没有影响。使用float会导致要计算的元素的display属性被阻止。    vertical-align 对弹性项目的对齐没有影响。

＆＃13;

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

＆＃13;

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

＆＃13;

在弹性项目上显示表格

4 个答案: