在前端开发中，很多时候我们会面临这样一个问题：在 IE9 浏览器下，元素的变形会导致布局错乱。这种情况一般出现在使用了 Float 和 Clear 的情况下，这些属性在 IE9 中并不被完全支持。因此，我们需要寻找一种新的解决方案来解决这个问题。Flexbox 就是一种非常好的解决方案。
Flexbox 是什么？
Flexbox 是一个 CSS 3 中的模块，用于控制一个容器内的子元素的布局。简单来说，它可以让我们更加灵活地排版元素，同时也解决了一些旧浏览器下的布局问题。
如何使用 Flexbox
在使用 Flexbox 时，我们需要将父元素的 display 属性设为 flex，这样子元素就可以按照我们指定的方式进行布局了。同时，我们还可以通过设置一些其他的属性来进一步控制元素的布局。
举个例子，下面的代码展示了如何使用 Flexbox 进行水平居中。
.container {
display: flex;
justify-content: center;
align-items: center;
}在这个例子中，我们将容器的 display 属性设为 flex，然后使用 justify-content 和 align-items 这两个属性来实现水平垂直居中。
Flexbox 解决问题的实际案例
下面，我们将通过一个实际案例来演示 Flexbox 如何解决 IE9 下元素变形导致布局错乱的问题。
首先，我们来看一下没有使用 Flexbox 的情况下，在 IE9 下元素变形导致布局错乱的情况。
-- -------------------- ---- ------- ---- ------------------ ---- -------------------- ---- --------------------- ------ ------- ---------- - ------ ------ - ------ - ------ ----- ------ ------ ------- ------ ----------------- ---- - ------- - ------ ------ ------ ------ ------- ------ ----------------- ----- - --------
在这个例子中，我们将容器的宽度设置为了 500px，然后将两个子元素分别设置成了 float: left 和 float: right，这样就形成了左右两个元素。
然而，在 IE9 下，我们可以看到两个元素出现了变形，导致布局错乱。
接下来，我们来看一下如何使用 Flexbox 来解决这个问题。
-- -------------------- ---- ------- ---- ------------------ ---- -------------------- ---- --------------------- ------ ------- ---------- - -------- ----- ---------------- -------------- ------ ------ - ------ - ------ ------ ------- ------ ----------------- ---- - ------- - ------ ------ ------- ------ ----------------- ----- - --------
在这个例子中，我们将容器的 display 属性设为了 flex，并且使用了 justify-content: space-between 这个属性来实现左右两个元素之间的间距。同时，我们还将两个子元素的 float 属性删除了，这样就避免了因为浮动引起的布局问题。
结论
Flexbox 可以非常好地解决 IE9 下元素变形导致布局错乱的问题。它可以让我们更加灵活地排版元素，同时也解决了一些旧浏览器下的布局问题。值得一提的是，虽然 IE9 不支持 Flexbox，但是我们可以通过使用 flexie.js 这个插件来实现兼容。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f4e65cc5c563ced5668249