如何解决 IE 的 flexbox 问题？

Question

我们正在使用 Flexbox 创建一个网格系统，发现<div class="flex-row"> 中的元素在除 IE 11 之外的所有浏览器中都可以正常工作。

我们如何修复元素以使文本使框正常展开？

.flex-row {
  display: flex;
  flex: 1 1 100%;
  flex-direction: row;
  flex-wrap: wrap;
}

.flex-col {
  margin: 6px;
  padding: 16px;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1 0px;
  flex-direction: column;
  color: white;
}

@media (max-width:767px) {
  .flex-col {
    flex-basis: calc(50% - 24px);
  }
}

@media (max-width:460px) {
  .flex-col {
    flex-basis: 100%;
  }
}

<div class="flex-row">
<div class="flex-col">Assertively negotiate interoperable portals without cross functional process improvements. Dramatically incentivize tactical best practices with.</div>
<div class="flex-col">Seamlessly grow competitive.</div>
<div class="flex-col">Distinctively optimize user-centric mindshare vis-a-vis plug-and-play infomediaries. Seamlessly optimize impactful solutions and enabled infrastructures.</div>
<div class="flex-col">Dynamically extend flexible catalysts for change via pandemic supply chains. Efficiently.</div>
</div>

IE 的当前行为：

期望的结果

Answer 1

我认为您将 flex-items 的属性与 flex-containers 混淆了。请仔细检查。

无论如何，由于 flexbox 和 IE 的众多错误之一，您的代码无法正常工作。似乎 align-items: center;你的弹性列是罪魁祸首。只需将其删除即可。

.flex-row {
  display: flex;
  flex: 1 1 100%;
  flex-direction: row;
  flex-wrap: wrap;
}

.flex-col {
  margin: 6px;
  padding: 16px;
  background-color: black;
  display: flex;
  justify-content: center;
  flex: 1 1 0px;
  flex-direction: column;
  color: white;
}

<div class="flex-row">
  <div class="flex-col">Assertively negotiate interoperable portals without cross functional process improvements. Dramatically incentivize tactical best practices with.</div>
  <div class="flex-col">Seamlessly grow competitive.</div>
  <div class="flex-col">Distinctively optimize user-centric mindshare vis-a-vis plug-and-play infomediaries. Seamlessly optimize impactful solutions and enabled infrastructures.</div>
  <div class="flex-col">Dynamically extend flexible catalysts for change via pandemic supply chains. Efficiently.</div>
</div>

（我已经删除了仅用于 SO sn-p 目的的媒体查询）

您真的需要将您的 flex-columns 作为列方向的 flex-containers 吗？如果是这样，你真的需要它们是 align-items:center 吗？