现代 web 开发中，我们通常使用 flexbox 来布局页面，它能快捷地实现复杂的布局需求。然而，当我们需要兼容 IE 浏览器时，就会发现需要为每个 flex-item 添加 flex-basis: 0 这一属性才能正常工作。为了解决这个问题，我们可以使用 postcss-ie-flex-basis-default-auto 这个 npm 包。
什么是 postcss-ie-flex-basis-default-auto
postcss-ie-flex-basis-default-auto 是一个可用于 postcss 处理器的插件，它会将所有的 flex-basis: auto 自动转换为 flex-basis: 0，从而解决 IE 浏览器兼容性问题。
使用步骤
安装
在使用 postcss-ie-flex-basis-default-auto 前，需要先安装 postcss 和该插件。
npm install postcss postcss-ie-flex-basis-default-auto --save-dev
配置
在项目根目录下创建一个名为 postcss.config.js 的文件，并添加以下代码：
module.exports = {
plugins: [
require('postcss-ie-flex-basis-default-auto')
]
}使用
在前端工程中使用 postcss （例如在 webpack 中配置）后，所有的 flex-basis: auto 会被自动替换为 flex-basis: 0。
-- -------------------- ---- ------- -- ------ -- ---------- - ---------- -- ----------- ----- - -- ----- -- ---------- - ---------- -- ----------- -- -
示例代码
假设我们有一个需求：在一个内容区域内，左侧边栏固定宽度，右侧为自适应宽度。使用 flexbox 可以轻松实现这一需求，不过在 IE 中需要将 flex-item 的 flex-basis 属性设置为 0 才能正常工作。
使用 postcss-ie-flex-basis-default-auto 后，我们不用手动添加这些属性，代码可读性得到了提高。
HTML
<div class="wrapper"> <aside class="sidebar">Side Bar</aside> <main class="main">Main Content</main> </div>
CSS
-- -------------------- ---- ------- -------- - -------- ----- ---------- ----- - -------- - ------ ------ ---------------------- - ----- - ----- -- ---------------------- -
经过 postcss 处理后
-- -------------------- ---- ------- -------- - -------- ----- ---------- ----- - -------- - ------ ------ ----- - - -- ---------------------- - ----- - ----- - - -- ---------------------- -
结语
postcss-ie-flex-basis-default-auto 是一个解决 IE 浏览器兼容性问题的好工具，可以让我们更快速地实现布局，并提高代码的可读性。推荐给各位前端开发者。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562ef81e8991b448e0a8c