什么是 CSS Reset？
在我们开始探讨在使用 CSS Reset 的情况下保持 flexbox 布局之前，我们需要先了解什么是 CSS Reset。CSS Reset 是一种用于归零不同浏览器之间的样式差异以及清除默认样式的技术。CSS Reset 的目的是确保在 Web 页面中的不同元素都使用相同的默认样式。
CSS Reset 对于布局的影响
CSS Reset 可以让网站的样式统一，使得不再受到各浏览器的影响，但是 CSS Reset 的缺点是重置了大量的默认样式。这导致在使用 CSS Reset 的情况下，我们需要手动添加很多的样式来保证布局正常。尤其是在使用 flexbox 布局时，如果我们不知道如何正确使用 CSS Reset，就会导致布局的错乱。
以下是实现在使用 CSS Reset 的情况下保持 flexbox 布局的一些技巧：
1. 理解 CSS Reset 的本质
在使用 CSS Reset 时，需要明白其本质是清除默认的样式以及统一浏览器之间的差异。因此，我们需要在清除默认样式的同时，保留必要的样式。
2. 在 CSS Reset 中保留 flexbox 样式
在使用 CSS Reset 的情况下保持 flexbox 布局的最简单方法是在 CSS Reset 中保留 flexbox 样式。以下是一个简单的 CSS Reset，在其中保留了 flexbox 样式：
-- -------------------- ---- -------
- -
------- --
-------- --
----------- -----------
-
----- ---- -
------- -----
-
---- -
-------- -----
--------------- -------
-3. 通过设置全局类修复 flexbox 布局
如果我们使用的 CSS Reset 并没有包含 flexbox 样式，我们可以通过添加一个全局类 .flex 来修复 flexbox 布局。以下是一个简单的示例：
-- -------------------- ---- -------
-- --- ----- --
- -
------- --
-------- --
----------- -----------
-
----- ---- -
------- -----
-
-- ------- ---- --
----- -
-------- -----
-通过添加 .flex 类到任何需要使用 flexbox 布局的元素上，我们就可以保持原来的 flexbox 样式。
结论
在使用 CSS Reset 的情况下保持 flexbox 布局并不是难事。我们只需要理解 CSS Reset 的本质，保留 flexbox 样式，或者通过设置全局类来修复 flexbox 布局。在处理布局时，我们应该尽可能避免使用复杂的布局并保持简单，这也能够更好地保持布局的一致性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f7c930c5c563ced5aacd50
