Flexbox: <td> 作为行和列（IE 帮助）

Question

在我的项目中，我需要操纵一个标准表格以某种方式行动。我需要 <td> 既是列又是行，具体取决于内容和分辨率（响应能力）。

到目前为止，它可以在 Chrome 和 FF 中运行，但在 IE 中完全搞砸了，我没有任何运气试图找出原因。

这是我的代码：

body {
  color: #fff;
}
table,
.line2,
.line3 {
  width: 100%;
}
tr {
  display: flex;
  flex-flow: row wrap;
}
td {
  margin: 1px;
}
.line1 {
  background: red;
  flex: 1;
}
.line2,
.line3 {
  background: blue;
}
.line3 {
  background: green;
}

<table>
  <tr>
    <td class="line1">line 1</td>
    <td class="line1">line 1</td>
    <td class="line1">line 1</td>
    <td class="line1">line 1</td>
    <td class="line2">line 2</td>
    <td class="line3">line 3</td>
  </tr>
</table>

我希望所有line1's 成为列，line2/3 成为下面的行。

但是，在 IE11 中（我在下面假设）它们只是全部堆叠为列，完全搞砸了。

我查看了https://github.com/philipwalton/flexbugs，但找不到解决方案。

我做错了什么？这在 IE 中不起作用吗？

Answer 1

如您所知，IE11 以存在许多“flex bug”而闻名 (details)。

例如，您的代码中的 flex 属性存在多个呈现问题 (details)。

在这种特殊情况下，使用 HTML 表格元素似乎会增加混乱，而 IE11 只是不知道该怎么做。更具体地说，IE11 无法识别表格元素上的 flex 属性。

您还需要考虑tbody 元素，您不需要包含它，但浏览器会自动将其添加到您的HTML 结构中（因为tbody 是required by the spec）。这会抛出 flex 格式化上下文，因为父子关系是必不可少的。

在 IE11（和其他主要浏览器）中似乎起作用的是在每个级别指定 flex 布局：

table {
  display: flex;
  width: 100%;
}
tbody {
  display: flex;
  flex-basis: 100%;
}
tr {
  display: flex;
  flex-basis: 100%;
  flex-flow: row wrap;
}
td {
  display: flex;
  flex-basis: 100%;
  flex-shrink: 0;
  margin: 1px;
}
.line1 { 
  flex-basis: 0; 
  flex: 1;
}
.line1 { background: red; }
.line2 { background: blue; }
.line3 { background: green; }
body { color: #fff; }

<table>
  <tr>
    <td class="line1">line 1</td>
    <td class="line1">line 1</td>
    <td class="line1">line 1</td>
    <td class="line1">line 1</td>
    <td class="line2">line 2</td>
    <td class="line3">line 3</td>
  </tr>
</table>

jsFiddle

Answer 2

感谢您的努力和时间——尤其是 Michael_B。

但是，我找到了一个更简单、可能更合适的解决方案。就是简单地给<td> 一个display: block;

所以不需要给每个元素都赋予 flex 属性。

关于我是否需要<tbody>——我意识到浏览器会添加它，但是我需要它来添加 ListJS（js 排序），因为它需要class="list"