为什么绝对定位的 Flex 项目会影响 IE11 中的布局？

IE11 中正常流中包含的绝对定位 Flex 项目

在 Flexbox 布局中，元素根据其元素排列在行或列中弹性属性。但是，当 Flexbox 中的元素绝对定位时，它就会成为流外元素，不应参与布局。

在提供的代码示例中：

<div class="container">
  <div class="c1">Content 1</div>
  <div class="c2">Content 2</div>
  <div class="bg">Background</div>
</div>

“.bg”div 是绝对定位的。尽管如此，在 IE11 中，Flex 项目之间的空间分布就像“.bg”div 是正常流的一部分一样。这是与 Flexbox 规范的偏差。

解决方法：

要解决此问题，一种解决方法是在另一个之间移动绝对定位的“.bg”div两个 Flex 项目：

<div class="container">
  <div class="c1">Content 1</div>
  <div class="bg">Background</div>
  <div class="c2">Content 2</div>
</div>

通过此结构更改，“.bg”div 不再影响 Flex 之间的空间分布项目，并实现所需的布局。

以上是为什么绝对定位的 Flex 项目会影响 IE11 中的布局？的详细内容。更多信息请关注PHP中文网其他相关文章！