如何解决IE的flexbox问题？

Question

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

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

​

.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-item和flex-containers的属性。仔细检查一下。

不管怎么说，你的代码不能正常工作是因为flexbox和IE有很多很多的bug。似乎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>

(我已经删除了媒体查询，仅用于摘录目的)

​

您真的需要将flex- column作为列定向flex容器吗？如果是这样的话，你真的需要它们成为align-items:center吗？