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

【问题标题】：Flexbox won't wrap within table in IE 10 and 11Flexbox 不会在 IE 10 和 11 中的表格内换行
【发布时间】：2016-04-20 05:45:22
【问题描述】：

我在表格中使用 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 相同，并且它开始工作。但是在这种情况下，我真的不能对我的桌子的标签这样做。感谢您对此的任何帮助。

【问题讨论】：

table 是根据其内容扩展/收缩的，如果设置宽度大小可以固定，table-layout 设置为固定。我想说，IE 做对了，因为没有任何东西告诉 td 不会增长超过 100px，所以 flexbox 必须包装内容 -|- 示例：宽度 + 表格布局jsfiddle.net/6fv3Lekd/21（其中 flexbox 没用，因为我们有块堆叠）

标签： css internet-explorer responsive-design flexbox

【解决方案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

【讨论】：

蓝色在 IE11 中不包裹。 IE10我没试过。
@PeterV.Mørch 正确...其中一个IE-flex-issues，将table-layout: fixed; 添加到表规则中
@PeterV.Mørch 也更新了我的答案，并附上了解释问题的链接
这对我有用：width: 100%;table-layout: fixed; 节省了我的时间。

【解决方案2】：

我使用浮动而不是 flexbox 来完成这项工作。浮动的包装行为在 IE 10 和 11 上效果很好，并且与 flexbox 包装的作用相同，但没有浏览器问题。（这不是我的偏好，因为将来出于其他原因我想要 flexbox 的独特功能，但是对于这个简单的示例，它可以完成工作，我最终可能会接受这种方法。）下面的示例并发布在另一个 JSFiddle 上https://jsfiddle.net/skurhu46/2/

<table class="my-table">
  <tbody>
  <tr>
    <td style="padding:0">
      <table class="my-table">
        <tbody>
        <tr>
          <td class="tbl-item">abc</td>          
          <td class="tbl-item">abc</td>          
          <td class="tbl-item">abc</td>          
          <td class="tbl-item">abc</td>          
          <td class="tbl-item">abc</td>          
          <td class="tbl-item">abc</td>          
        </tr>
        </tbody>
      </table>
    </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-purple {
   flex: 0 0 100px;
   border:1px solid purple;
}
.tbl-item {
  float: left;
  width: 100px;
  border:1px solid blue;  
  padding: 0;
}
.my-table {
  border-collapse: collapse;
}

【讨论】：