表格单元格中的 Flexbox 出现在垂直中间

Question

我在表格中使用 flexbox。 该表有 2 列，每列有一个单元格。 左边的单元格非常大，高度大约为 189%。 我的 CSS 如下：

#openemail {
  display: flex;
  flex-flow: column;
  height: 100%;
}

#openemail>#header {
  flex: 0 1 auto;
}

#openemail>#body {
  flex: 1 1 auto;
}

<table id="app">
  <tr>
    <td>
      <div id="emailslist"><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></div>
    </td>
    <td>
      <div id="openemail">
        <div id="header">SSS</div>
        <div id="body">more SSS</div>
      </div>
    </td>
  </tr>
</table>

如您所见，flex 容器位于中间，很难找到。我的问题是：如何更改我的 CSS 以使 flex 容器位于表格单元格的顶部？

Answer 1

将vertical-align:top 添加到表格单元格中是否会达到您想要的效果？像这样：

<table id="app">
  <tr>
    <td>
      <div id="emailslist"><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></div>
    </td>
    <td style="vertical-align: top;">
      <div id="openemail"><div id="header">SSS</div><div id="body">more SSS</div></div>
    </td>
  </tr>
</table>

Answer 2

推荐：

将vertical-align: top 应用于<td> 似乎是2018 中的最佳解决方案，CSS3 和HTML5 完全支持。这是一个工作示例：

table, th, td {
    border: 1px solid black;
}

#openemail {
    display: flex;
    flex-flow: column;
    height: 100%;
}

#openemail>#header {
    flex: 0 1 auto;
}

#openemail>#body {
    flex: 1 1 auto;
}

    <table id="app">
<tr>
    <td>
        <div id="emailslist">
            placeholder<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        </div>
    </td>
    <td style="vertical-align: top">
        <div id="openemail"><div id="header">SSS</div><div id="body">more SSS</div></div>
    </td>
</tr>
</table>

要了解有关vertical-align 样式的更多信息：https://www.w3schools.com/cssref/pr_pos_vertical-align.asp

不推荐：

如果您使用的是旧版本的 HTML，以下解决方案也可以工作：将 <td> 的 valign 属性设置为 top。它看起来像这样：

table, th, td {
    border: 1px solid black;
}

#openemail {
    display: flex;
    flex-flow: column;
    height: 100%;
}

#openemail>#header {
    flex: 0 1 auto;
}

#openemail>#body {
    flex: 1 1 auto;
}

    <table id="app">
<tr>
    <td>
        <div id="emailslist">
            placeholder<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        </div>
    </td>
    <td valign="top">
        <div id="openemail"><div id="header">SSS</div><div id="body">more SSS</div></div>
    </td>
</tr>
</table>

要了解有关valign 属性的更多信息：https://www.w3schools.com/tags/att_td_valign.asp

希望这会有所帮助！

Answer 3

由于您正在处理表格单元格，vertical-align 属性开始发挥作用。此属性仅适用于内联级和表格单元格元素。

vertical-align 属性 according to the spec 的默认值为 baseline。然而，少校browsers tend to use the middle value 代替。

无论如何，表格单元格的内容都是垂直居中的。

您可以使用vertical-align: top 覆盖此设置。

更多详情：Default value of vertical-align for table cells