html - Flexbox: 作为行和列(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 错误”(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