随着前端技术的不断发展，Flexbox 布局已经成为前端开发中不可缺少的一部分。Flexbox 布局非常便于实现响应式布局，可以很好的解决页面布局问题。但是，在 IE 浏览器中，使用 display: flex 属性可能会出现一些问题。本文主要介绍如何在 IE 中修复 display:flex 的问题，并给出代码示例。
display:flex 在 IE 中的问题
在现代浏览器中，使用 display:flex 属性可以很方便的实现 Flexbox 布局。但是，在 IE 浏览器中，display:flex 属性会被自动识别为 display:inline-flex 属性。这意味着，在 IE 中，元素会按行排列，而不是按照 Flexbox 布局应有的方式排列。
修复 display:flex 在 IE 中的问题
为了修复 display:flex 在 IE 中的问题，我们需要使用 display:-ms-flexbox 属性。这个属性是专门为 IE 浏览器设计的，可以让 IE 浏览器正确地解析 Flexbox 布局。
下面是一个简单的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
-------------- ------------
-------
---------- -
-------- ------------ -- -- --
-------- ----- -- ----- --
-------------- ----- -- -- --
---------- ----- -- ----- --
-
----- -
--------- - - ------ -- -- --
----- - - ------ -- ----- --
------- -----
----------------- -----
-
--------
-------
------
---- ------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
------
-------
-------在这个示例代码中，我们使用了 display:-ms-flexbox 和 -ms-flex 属性来解决在 IE 中使用 display:flex 属性出现的问题。同时，为了让 Flexbox 布局更加美观，我们还设置了 -ms-flex-wrap 和 flex-wrap 属性来使元素自动换行。
总结
Flexbox 布局是一种非常流行的布局方式，可以很好的解决响应式布局的问题。但是，在 IE 浏览器中使用 display:flex 属性可能会出现一些问题。通过使用 display:-ms-flexbox 和 -ms-flex 属性，我们可以很方便地解决这个问题，并让 Flexbox 布局在所有浏览器中得到很好的支持。希望这篇文章可以帮助你更好地掌握 Flexbox 布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646c48a8968c7c53b0b4b892