背景
Flexbox 是一种灵活的布局方式，可以在容器中自由地排列和对齐子项。然而，在 Internet Explorer 11 中，使用 Flexbox 时会遇到一些兼容性问题，其中之一就是外边距不起作用。
问题描述
在 Flexbox 布局中，设置子项的外边距可能会失效。例如，以下代码在现代浏览器中可以正常工作，但在 Internet Explorer 11 中，子项之间不会有外边距。
-- -------------------- ---- -------
---- ------------------
---- ----------------- -------
---- ----------------- -------
---- ----------------- -------
------
-------
---------- -
-------- -----
---------------- --------------
-
----- -
------- - -----
-
--------原因分析
在 Flexbox 布局中，子项的外边距指的是子项与容器边缘之间的距离。然而，在 Internet Explorer 11 中，Flexbox 实现有些微妙的不同，导致其计算外边距的方式与其他浏览器不同。
具体来说，IE11 会在子项周围添加额外的空隙，称为“flex 内部空隙（flex gutters）”，而外边距则被应用在这些空隙之外。因此，即使我们设置了子项的外边距，它们也不会生效。
解决方法
为了解决这个问题，我们需要使用一些技巧。以下是两种解决方法：
方法一：使用 padding 代替外边距
让子项在容器中留出间隔，而不是使用外边距。这可以通过在子项上设置 padding 实现。以下是示例代码：
-- -------------------- ---- -------
---- ------------------
---- ----------------- -------
---- ----------------- -------
---- ----------------- -------
------
-------
---------- -
-------- -----
---------------- --------------
-
----- -
-------- - -----
----------- -----------
-
--------注意，在这种方法中，我们需要将 box-sizing 设置为 border-box，以确保 padding 不会影响子项的宽度。
方法二：使用伪元素代替外边距
在容器中添加伪元素，在伪元素上应用外边距，而不是在子项上应用。以下是示例代码：
-- -------------------- ---- -------
---- ------------------
---- ----------------- -------
---- ----------------- -------
---- ----------------- -------
------
-------
---------- -
-------- -----
---------------- --------------
--------- ---------
-
------------ -
-------- ---
-------- ------
------- - -----
------- --
-
--------在这种方法中，我们需要使用伪元素的 content 属性创建一个空元素。height 属性设置为 0，以确保伪元素不会影响布局。然后，在伪元素上应用 margin 属性来模拟外边距。
结论
Flexbox 的外边距问题可能会导致在 Internet Explorer 11 中的布局不符合预期。为了解决这个问题，我们可以使用 padding 或伪元素等技巧来模拟外边距。这将确保我们可以在所有浏览器中获得一致的布局效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671a1af19babaf620fa136c8