Skip to content

Latest commit

 

History

History
57 lines (49 loc) · 2.48 KB

README-zh_CN.md

File metadata and controls

57 lines (49 loc) · 2.48 KB

flex-native

English|简体中文

🔗 内容列表

背景

  • 由于之前写项目大多都使用flex布局 ,到了一家新公司后开始做ie9的兼容、而flex布局又只支持ie10+,在ie9中实现一个居中布局就不是那么方便、虽然也能用其他布局实现、但是不是这么熟练、开发效率减少了不少、
  • 在网上找了不少关于在ie9中使用flex布局的库,几乎都不理想就想着自己实现一个支持flexbox布局的库

🖥 环境支持

  • 现代浏览器和 ie9+
IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
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没有区别

🤝 贡献者

@robertpanvip
@1844877065