如何修复IE的flexbox问题？

Question

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

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

＆＃13;

＆＃13;

.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%;
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

IE的当前行为：

期望的结果

Answer 1

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

无论如何，你的代码因为flexbox和IE中的许多错误之一而无法正常工作。似乎对齐项目：中心;在你的弹性柱上是责任。只需删除它就可以了。

.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片段目的）

您真的需要将柔性柱作为柱式柔性容器吗？如果是这样，你真的需要它们作为对齐物品：中心吗？