Flex CSS属性并不适用于IE和Firefox

Question

我正在寻找一种解决方案，如何让Flex属性在所有三种浏览器（IE，Firefox和Chrome）上的table组件上运行。

以下代码仅适用于Chrome（即使添加了-ms-和-webkit-前缀）：

＆＃13;

＆＃13;

table {
  background-color: white;
}
.child {
  padding: 5px;
  margin: 5px;
  background-color: #eee;
  border: 3px solid;
}
.container {
  padding: 2px;
  background-color: yellow;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}
.child.one {
  color: green;
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1;
}
.child.two {
  color: purple;
  -webkit-order: 2;
  -ms-flex-order: 2;
  order: 2;
  flex-shrink: 0;
}
.child.three {
  color: red;
  -webkit-order: 3;
  -ms-flex-order: 3;
  order: 3;
}

＆＃13;

<table style="width:100%">
  <tbody>
    <tr class="container">
      <td class="child one" align="left">
        One
      </td>
      <td class="child two" align="center">
        Two.
        <br>Lorem ipsum
        <br>dolor sit amet
        <br>This is a bit longer line
      </td>
      <td class="child three" align="right">
        Three
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

请查看小提琴中的代码： http://jsfiddle.net/ax961ys1/

Answer 1

这似乎是由于默认情况下每个.child元素都是display: table-cell;（预计这些元素确实是表格单元格！）。

在Chrome中.container上使用flexbox模型时，.child元素会自动转换为display: block;，从而使flexbox可以正常工作。

在Firefox和IE中，.child元素仍为display: table-cell;。

CSS Flexible Box Layout Module的最新W3C草案声明：

  

Flex项的显示值被阻塞：如果生成flex容器的元素的in-flow子节点的指定显示是内联级别值，则计算其块级别等效值。 （有关此类显示值转换的详细信息，请参阅CSS2.1§9.7[CSS21]和CSS Display [CSS3-DISPLAY]。）

Flex项目（https://drafts.csswg.org/css-flexbox-1/#flex-items）

这表明flex项应该更改为block-level equivalent（如果它不是块级元素）。

草案更进一步说明：

  

某些显示值通常会触发在原始框周围创建匿名框。如果这样的框是弹性项，则它首先被阻塞，因此不会发生匿名框创建。例如，带有display：table-cell的两个连续的flex项将成为两个单独的display：block flex items，而不是被包装到一个匿名表中。

Flex项目（https://drafts.csswg.org/css-flexbox-1/#flex-items）

在这种情况下，似乎这是Chrome正在做的事情，但IE和Firefox不是。匿名表的存在以及.child元素未被阻塞的事实似乎是行为的原因。

要在Chrome，IE和Firefox中获得相同的结果：

• 将display: block;添加到.child
• 为确保.child元素在IE中正确包装，请将display: block;添加到table和tbody

table {
  background-color: white;
  display: block; /*Required for wrap to work correctly in IE*/
}
tbody {
  display: block; /*Required for wrap to work correctly in IE*/
}
.child {
  padding: 5px;
  margin: 5px;
  background-color: #eee;
  border: 3px solid;
  display: block;
}
.container {
  padding: 2px;
  background-color: yellow;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}
.child.one {
  color: green;
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1;
}
.child.two {
  color: purple;
  -webkit-order: 2;
  -ms-flex-order: 2;
  order: 2;
  flex-shrink: 0;
}
.child.three {
  color: red;
  -webkit-order: 3;
  -ms-flex-order: 3;
  order: 3;
}

<table style="width:100%">
  <tbody>
    <tr class="container">
      <td class="child one" align="left">
        One
      </td>
      <td class="child two" align="center">
        Two.
        <br>Lorem ipsum
        <br>dolor sit amet
        <br>This is a bit longer line
      </td>
      <td class="child three" align="right">
        Three
      </td>
    </tr>
  </tbody>
</table>