前言
Flexbox 是一种现代的 CSS 布局方式，它在响应式布局中具有重要的作用。虽然大多数现代浏览器都已经支持了这种方式，但是 IE11 在兼容性方面仍然会出现一些问题。本文将介绍如何结合 CSS Reset 在 IE11 上实现 Flexbox 布局。
什么是 CSS Reset
CSS Reset 是一种约定俗成的样式规则，旨在解决 Web 页面在不同浏览器中表现不一致的问题。这种方式通常会重置许多不必要或默认的样式，以确保页面在不同的浏览器中呈现一致的效果。
如何使用 CSS Reset
使用 CSS Reset 可以让页面在不同浏览器中呈现一致的效果。以下是一个简单的 CSS Reset 的例子：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}这个例子中，* 选择器将匹配所有元素，并将它们的 margin、padding 属性都设置为了 0，同时将盒模型的计算方式设置为 border-box。这种方式可以避免在不同浏览器中因为对元素默认样式的不同而产生差异。
Flexbox 布局
Flexbox（弹性盒子）布局是一种新的 CSS3 布局方式，它将父容器作为一个“弹性盒子”，并可支持子元素在父容器内的自由布局。以下是这种布局方式的一个简单示例：
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- ---------------- -------------- ------------ ------- - ---------- ----- - ------ ------ ------- ------ -------------- ----- -
上面的代码展示了一个简单的 Flexbox 布局，父容器具有 display: flex 属性，子元素具有 width 和 margin-bottom 属性。在父容器中，我们还可以指定一些其他的属性，如 flex-wrap、justify-content 和 align-items 等，以便实现更加复杂的布局效果。
在 IE11 上实现 Flexbox 布局
虽然大多数现代浏览器都已经支持 Flexbox 布局，但是 IE11 在兼容性方面仍然存在问题。不过，在结合 CSS Reset 的情况下，我们可以通过使用 polyfill 来解决这个问题。以下是一个简单的 polyfill 示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------- ----------------
-------
-- --- ----- --
- -
------- --
-------- --
----------- -----------
-
---------- -
-------- -----
---------- -----
---------------- --------------
------------ -------
-
---------- ----- -
------ ------
------- ------
-------------- -----
-
--------
-------
------
---- ------------------
---- ----------------- -------
---- ----------------- -------
---- ----------------- -------
------
------- --- -- ----
------- -------------------------------------------------------------------------------------------
------------
-------
-------在上面的例子中，我们首先在 header 中包含了 CSS Reset 样式，然后在 body 中创建了一个 div 容器，并指定了一个简单的 Flexbox 布局。在文档底部，我们使用了一个条件注释，以便只在 IE11 下加载 Flexbox polyfill。这个 polyfill 是非常轻量级的，只有 1KB，可以很好的解决 IE11 兼容性问题。
总结
CSS Reset 和 Flexbox 布局是两个非常重要的前端技术。通过结合使用它们，我们可以在不同浏览器中实现一致的效果。虽然在 IE11 上使用 Flexbox 布局存在兼容性问题，但是通过使用 polyfill，我们仍然可以轻松地实现这种布局方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f975fdf6b2d6eab30f6774