前言
在开发前端页面时，各种布局方式都是我们需要掌握的技能，而 Flexbox 布局就是较为流行的一种，它可以帮助我们快速地实现各种复杂的布局效果。但是在实际开发中，我们经常会遇到兼容性问题，其中最常见的就是 CSS Reset 和 Flexbox 布局的兼容性问题，这对于我们开发者来说是一个相当棘手的问题。
CSS Reset
在编写 CSS 样式时，由于各个浏览器的特性不同，会导致同样的代码在不同浏览器上有不同的表现，这样就会影响开发和用户体验，因此我们需要对样式进行统一处理。CSS Reset 就是一种常见的处理方式，它会重置浏览器的默认样式，使我们的样式代码能够更简洁、明确地实现我们的需求。
但是，一旦使用了 CSS Reset，就可能会出现一些未知的兼容性问题，比如说针对 Flexbox 布局的样式重置可能会导致布局错乱，因为默认的样式与 Flexbox 相关的样式被移除了。
Flexbox 布局
Flexbox 布局是一种基于弹性盒子模型的布局方式，它可以让我们轻松地实现各种复杂的布局效果，比如垂直居中、分栏布局、固定头部等等。不论是在响应式设计还是在移动端开发中，Flexbox 都是不可或缺的一种技术。
兼容性问题及解决
在使用 Flexbox 布局时，我们会经常遇到一些兼容性问题，比如一些旧版本的浏览器不支持 Flexbox 的某些属性，甚至在某些浏览器中，使用 Flexbox 会导致布局错乱。以下是一些常见的兼容性问题及其解决方法。
1.某些浏览器不支持 Flexbox
在较旧的浏览器中，比如 IE9 等，是不支持 Flexbox 的。对于这种情况，我们可以使用 CSS Zen Garden 网站提供的一种叫做 Flexbox Generator 的工具，它可以帮助我们生成兼容性更好的 Flexbox 样式代码。
2.在某些浏览器中，Flexbox 布局出现错乱
在部分浏览器中，Flexbox 布局可能会出现某些元素位置错乱的问题。这可能是由于浏览器默认样式与我们使用的样式产生冲突所导致的。我们可以在需要使用 Flexbox 布局的父元素上添加一些样式，来解决这个问题。
以下是一个示例代码：
-- -------------------- ---- ------- -- ---- -- ------- - -------- ----- --------------- ------- ----------------- ----- -------- ----- ------- --- ----- ----- ----------- ----------- - -- ---- --
其中，我们针对父元素添加了一些样式，包括 display:flex、flex-direction:column 等。这些样式可以让浏览器更好地识别我们使用的 Flexbox 样式，从而避免布局出现错误。
总结
CSS Reset 和 Flexbox 布局都是不可或缺的前端技能。但是，在开发过程中我们有可能会遇到它们之间的兼容性问题。为了解决这些问题，我们需要学会针对具体情况进行分析和优化——在必要的时候使用工具、添加样式，从而使我们的布局更加流畅、简洁、美观。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645eb72c968c7c53b00f5afe