English|简体中文
- 由于之前写项目大多都使用flex布局 ,到了一家新公司后开始做ie9的兼容、而flex布局又只支持ie10+,在ie9中实现一个居中布局就不是那么方便、虽然也能用其他布局实现、但是不是这么熟练、开发效率减少了不少、
- 在网上找了不少关于在ie9中使用flex布局的库,几乎都不理想就想着自己实现一个支持flexbox布局的库
- 现代浏览器和 ie9+
IE / Edge |
Firefox |
Chrome |
Safari |
---|---|---|---|
IE9+, Edge | 3.5+ | all | all |
由于使用了transform 属性去计算位置 所以只要是支持transform属性的浏览器都支持
npm install flex-native
- 在普通的HTML中使用
<script src='https://unpkg.com/flex-native@latest'>
- 在模块化中使用
import('flex-native');
使用时请在CSS中的任何display: flex
声明之前添加一个 -js-display: flex
声明,
或在构建过程中使用PostCSS Flexibility自动添加-js前缀。
-
Css中
.wrapper{
-js-display:flex;
display:flex;
align-items:center;
justify-content:center;
} -
元素上
<div style='display:flex;align-items:center' />
总的来说和普通写css没有区别