html - 如何解决 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 元素和 flex 容器的属性..仔细检查一下。

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

.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 片段的目的删除了媒体查询)

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