flex-native

适合ie9+的flex布局、 Flex layout patch for IE9 +

Usage no npm install needed!

<script type="module">
  import flexNative from 'https://cdn.skypack.dev/flex-native';
</script>

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+, Edge 3.5+ all all

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