什么是 Flexbox 布局
Flexbox 布局是 CSS3 新增的一种布局方式，它可以让我们更加方便地对容器内的元素进行布局。Flexbox 布局的核心是 flex 容器和 flex 项目，通过对这两个元素进行属性设置，我们可以实现各种复杂的布局效果。
Flexbox 布局在 IE 浏览器下的兼容性问题
虽然 Flexbox 布局在现代浏览器中得到了广泛的支持，但是在 IE 浏览器中却存在一些兼容性问题。具体来说，IE 浏览器对 Flexbox 布局的支持比较有限，主要表现在以下几个方面：
- 不支持 flex 容器的 display 属性值为 flex。
- 不支持 flex 容器的 flex-wrap 属性。
- 不支持 flex 项目的 order 属性。
- 不支持 flex 项目的 flex-basis 属性。
- 不支持 flex 项目的 align-self 属性。
因此，在使用 Flexbox 布局时，我们需要针对这些兼容性问题进行降级处理，以确保在 IE 浏览器中也能够正常显示页面。
Flexbox 布局在 IE 浏览器下的降级处理
使用 display: inline-block
在 IE 浏览器中不支持将 display 属性值设置为 flex，因此我们可以采用 display: inline-block 的方式来代替。具体来说，我们可以将 flex 容器的 display 属性设置为 inline-block，然后再通过设置宽度和 margin 等属性来实现布局。
--------------- - -------- ------------- ------ ----- ------- -- -------- -- -
使用 float
在 IE 浏览器中也不支持 flex 容器的 flex-wrap 属性，因此我们可以采用 float 的方式来代替。具体来说，我们可以将 flex 容器的子元素设置为 float，然后再通过清除浮动等方式来实现布局。
---------- - ------ ----- ------ ---- ------- -- -------- -- - ----------------- --------------- - -------- --- -------- ------ - --------------- - ------ ----- -
使用 table-cell
在 IE 浏览器中不支持 flex 项目的 order 和 flex-basis 属性，因此我们可以采用 table-cell 的方式来代替。具体来说，我们可以将 flex 容器的 display 属性设置为 table，然后再将 flex 项目的 display 属性设置为 table-cell，然后再通过设置宽度和 vertical-align 等属性来实现布局。
--------------- - -------- ------ ------ ----- ------- -- -------- -- - ---------- - -------- ----------- ------ ---- ------- -- -------- -- --------------- ------- -
使用 align-items
在 IE 浏览器中不支持 flex 项目的 align-self 属性，因此我们可以采用 align-items 的方式来代替。具体来说，我们可以将 flex 容器的 display 属性设置为 table，然后再通过设置 vertical-align 属性来实现垂直居中。
--------------- - -------- ------ ------ ----- ------- -- -------- -- --------------- ------- - ---------- - -------- ----------- ------ ---- ------- -- -------- -- -
总结
Flexbox 布局是一种非常便捷的布局方式，可以让我们更加方便地对容器内的元素进行布局。但是在 IE 浏览器中，由于兼容性问题，我们需要进行一些降级处理。通过使用 display: inline-block、float、table-cell 和 align-items 等方式，我们可以在 IE 浏览器中实现类似于 Flexbox 布局的效果。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65c47c3dadd4f0e0ffeffd86