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-items 和 flex-containers 的属性。请仔细检查。

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

.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 容器吗？如果是这样，您真的需要它们对齐元素:居中吗？