fn

flex-native

A JavaScript polyfill for Flexbox、 ie9 flexbox polyfill 适合在ie9中使用flexbox

Showing:

Popularity

Downloads/wk

34

GitHub Stars

20

Maintenance

Last Commit

1yr ago

Contributors

2

Package

Dependencies

1

Size (min+gzip)

20.4KB

License

ISC

Type Definitions

Tree-Shakeable

No?

Categories

Readme

flex-native

English | 简体中文

🔗 Content list

Background

  • Because most of the previously written projects use flex layout, and when they arrive at a new company, they start to make IE9 compatible, while flex layout only supports ie10 +, so it's not so convenient to implement a middle layout in IE9. Although it can also be implemented with other layouts, it's not so skilled, and the development efficiency is reduced

  • I found a lot of libraries on the Internet about using flex layout in IE9, but almost all of them were not ideal, so I wanted to realize a library supporting flex box layout by myself

🖥 Environment Support

  • Modern browser and IE9+
IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
IE9+, Edge3.5+allall

Since the transform attribute is used to calculate the location, any browser that supports the transform attribute supports it

📦 Installation

npm install flex-native

🔨 Usage

  • Use in normal HTML
<script src='https://unpkg.com/flex-native@latest'>;
  • Use in module
import('flex-native');

add a -js-display: flex declaration before any display: flex declarations in your CSS, or use PostCSS Flexibility to automate this during your build process. like this;

  • css
    .wrapper{
    -js-display:flex;
    display:flex;
    align-items:center;
    justify-content:center;
    }
  • inline
    <div style='display:flex;align-items:center' />

Generally speaking, it's no different from writing CSS

🤝 Contributor

@robertpanvip
@1844877065

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100