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

Question

我在表格内使用 Flexbox，它在 IE 10 和 11 中不工作。在你告诉我停止使用表格之前，让我解释一下表格在供应商的代码中，有人问我在我无法控制的 HTML 结构中工作。但我真的很想使用 flexbox，这样可以在任何屏幕宽度上进行换行。

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

我的目标如下:

• 在调整浏览器大小时，我需要蓝色方框像紫色方框一样包裹起来。 (在 Chrome 和其他浏览器中运行良好。)
• 我需要使用固定像素的 flex-basis，比如本例中的 100px，而不是百分比。
• 我希望它在 <td> 中工作表格单元格，其中table、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使用 display: block .这使它们与 <div>s 相同据我了解，它开始工作了。但在这种情况下，我真的不能对我的表格标签这样做。感谢您对此提供的任何帮助。

Answer 1

由于 table 元素不是 block 元素，它只会扩展到其内容大小，并且由于 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>
      

---

根据评论更新

使用 table-layout: fixed; 对 IE 的修复可以在这里阅读更多: flexbox-not-working-inside-table