Flexbox 不会在 IE 10 和 11 中的表格内换行

Question

我在表格内使用 Flexbox，但它在 IE 10 和 11 中不起作用。在您告诉我停止使用该表格之前，让我解释一下该表格位于供应商的代码中，并且我被要求在其中工作HTML 结构超出了我的控制范围。但我真的很想使用 Flexbox，这样可以在任何屏幕宽度上进行换行。

我在以下位置创建了一个小示例： https://jsfiddle.net/6fv3Lekd/18/

我的目标如下：

• 调整浏览器大小时，我需要像紫色盒子一样包裹蓝色盒子。（在 Chrome 和其他浏览器中运行良好。）
• 我需要使用固定像素的 Flex-Basis，例如本例中的 100px，而不是百分比。
• 我希望它在表格单元格内工作<td>，其中表格、tbody、tr 和 td 没有任何固定宽度设置。

（注意：我很清楚，在 IE 10 上，我将需要各种带前缀的 CSS 属性，例如“-ms-flex-wrap：wrap”，而不是我正在使用的通用现代属性。但在 IE 11 上，在开发人员工具中，它是告诉我 jsfiddle 中的内容已被接受（未划掉），因此我使用代码的简化版本来演示 IE 11 上的问题。）

这是在 jsfiddle 链接中找到的代码：

<table>
  <tbody>
  <tr>
    <td>
      <div class="flex-cont">
        <div class="flex-myitem">abc</div>
        <div class="flex-myitem">abc</div>
        <div class="flex-myitem">abc</div>
        <div class="flex-myitem">abc</div>
        <div class="flex-myitem">abc</div>
        <div class="flex-myitem">abc</div>
      </div>
    </td>
  </tr>
  </tbody>
</table>
<br>
<br>
<br>
<div class="flex-cont">
    <div class="flex-myitem-purple">abc</div>
    <div class="flex-myitem-purple">abc</div>
    <div class="flex-myitem-purple">abc</div>
    <div class="flex-myitem-purple">abc</div>
    <div class="flex-myitem-purple">abc</div>
    <div class="flex-myitem-purple">abc</div>
</div>

还有CSS：

.flex-cont {
   display: flex;
   flex-wrap: wrap;
}
.flex-myitem {
   flex: 0 0 100px;
   border:1px solid blue;
}
.flex-myitem-purple {
   flex: 0 0 100px;
   border:1px solid purple;
}

只是为了好玩，我还尝试将外部设置table, tbody, tr and td为 use display: block。<div>s这使得它们与我所理解的相同，并且它开始起作用。但在这种情况下，我真的无法对表的标签执行此操作。感谢您对此的任何帮助。

Answer 1

由于table元素不是块元素，因此它只会扩展到其内容大小，并且由于flex允许项目换行，因此它们会换行。

为了使它们在表格中表现相同，您需要使表格与正文具有相同的宽度。

要使 IE10 正常工作，您需要添加前缀 ( -ms-) flex 属性。

table {
  width: 100%;
  table-layout: fixed;         /*  for IE  */
}
.flex-cont {
   display: -ms-flex;
   display: flex;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}
.flex-myitem {
   -ms-flex: 0 0 100px;
   flex: 0 0 100px;
   border:1px solid blue;
}
.flex-myitem-purple {
   -ms-flex: 0 0 100px;
   flex: 0 0 100px;
   border:1px solid purple;
}

<table>
  <tbody>
  <tr>
    <td>
      <div class="flex-cont">
        <div class="flex-myitem">abc</div>
        <div class="flex-myitem">abc</div>
        <div class="flex-myitem">abc</div>
        <div class="flex-myitem">abc</div>
        <div class="flex-myitem">abc</div>
        <div class="flex-myitem">abc</div>
      </div>
    </td>
  </tr>
  </tbody>
</table>
<br>
<br>
<br>
<div class="flex-cont">
    <div class="flex-myitem-purple">abc</div>
    <div class="flex-myitem-purple">abc</div>
    <div class="flex-myitem-purple">abc</div>
    <div class="flex-myitem-purple">abc</div>
    <div class="flex-myitem-purple">abc</div>
    <div class="flex-myitem-purple">abc</div>
</div>
      

根据评论更新

用于 IE 的修复table-layout: fixed;可以在此处阅读更多信息： flexbox-not-working-inside-table