在编写前端页面布局时，使用 Flexbox 布局已经成为了一种比较流行的方式。然而，当我们在 IE11 中使用 Flexbox 布局时，会遇到一种问题，即会出现空白的情况，这对页面布局的美观度产生了很大的影响。本文将会介绍这种 “空白” bug 的原因并提供解决方案。
Flexbox 布局中的 “空白” bug
Flexbox 布局中的 “空白” bug 主要指的是在 IE11 中当我们使用 justify-content 属性时，可能会出现布局上的空白。例如，我们设置了一个容器的 justify-content 属性为 space-between，在其他浏览器中可以正确地将子元素平均分配在容器中，但在 IE11 中，最后一个子元素会与容器右边产生一定的距离，这就是出现空白的情况了。
解决方案
那么对于 Flexbox 布局中的 “空白” bug，有哪些解决方案呢？下面是一些常见的方法：
1. 使用 margin-right: auto
我们可以在最后一个子元素中添加 margin-right: auto，这样子元素就会自动向左移动，填充掉与容器的距离，解决了空白的问题。
.container {
display: flex;
justify-content: space-between;
}
.container > div:last-child {
margin-right: auto;
}2. 使用 flex 并设置 flex-basis
我们也可以在子元素中使用 flex 属性并设置 flex-basis，将最后一个子元素的 flex-basis 设为 100% 来填充容器中的剩余空间。
.container {
display: flex;
justify-content: space-between;
}
.container > div:last-child {
flex: 1 1 100%;
}3. 使用 ::before 伪元素
我们可以在容器中使用 ::before 伪元素来填充剩余空间，这样可以让最后一个子元素自动向左移动，填充掉与容器的距离。
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- -------------- - ------------------ - -------- --- ----- -- -
4. 使用 calc()
最后，我们也可以使用 calc() 函数来实现。我们可以将最后一个子元素的宽度设为 calc(100% - n px)，其中 n 为容器与最后一个子元素之间的距离。
.container {
display: flex;
justify-content: space-between;
}
.container > div:last-child {
width: calc(100% - 10px);
}实现示例
下面是一个使用 margin-right: auto 来解决 Flexbox 布局中的 “空白” bug 的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------- ---- ---- -----------
-------
---------- -
-------- -----
---------------- --------------
-
------------------------- -
------------- -----
-
---- -
------ ------
------- ------
----------- ----
-
--------
-------
------
---- ------------------
---- ------------------
---- ------------------
---- ------------------
------
-------
-------总结
通过本文的介绍，我们了解了 Flexbox 布局中的 “空白” bug 及其解决方案，我们可以根据实际需求选择其中的一种解决方案进行实现。掌握 Flexbox 布局在 IE11 中的 bug，并能正确地解决问题对于前端开发者来说是非常重要的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e6ce96f6b2d6eab32293ba