flex-native

English | 简体中文

🔗 Content list

• Background

• Environment Support

• Installation

• Usage

• Contributor

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	Firefox	Chrome	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