npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

flex.css

v1.1.7

Published

移动端flex布局神器,兼容微信,UC,webview等移动端主流浏览器

Downloads

1,954

Readme

npm npm npm

中文文档入口

download

git clone https://github.com/lzxb/flex.css.git

npm

npm install flex.css --save

Why do you need flex.css?

In the process of Mobile Terminal Development, standard flex is not supported by all versions of all kinds of
browsers, webview, and wechat which basically support  -webkit-box. So flex.css's main purpose is to ensure
that every attribute can be supported by standard version's flex or old-version's -webkit-box.
due to autoprefixer compilation is used by flex.css,it will roll back to old-version's -webkit-box when standard
flex is not supported by some browsers so the effect of layout will be the same.
Then,here comes a magic effient layout tool of mobile terminal development ...

merits

Concise api, 
familiar attribute values, makes it easy for you to get started in using flex.css.
In html, the layout is bind with attributes, so it is seperated from css. In this way, it will be easier for you
to maintain and modify your layout without modifying css.

support

flex layout is split into three versions: old version: display: box; , transitional version: display:flexbox; ,
and present standard version: display:flex; .
Android
2.3  began to support old version: display: -webkit-box;
4.4 began to support standard version: display: flex;
IOS
6.1  began to support old version: display: -webkit-box;
7.1 began to support standard version: display: flex;
PC
You can use flex.css if you don't need to consider IE10-.
flex.css is compatible with standard version and old version at the same time, so when a browser doesn't support standard version, it will roll back to old version.

Alt text

use

<!--
According to what you need, include css files in the dist directory into your html
flex.css should be matched by flex attribute
data-flex.css should be matched by data-flex attribute(used by React)
If you use webpack to package, after npm is installed, and ES6 compiler is deployed in your project,
flex attribute matching can be implemented in this way:
import 'flex.css';
data-flex attribute matching can be implemented in this way( used by React):
import 'flex.css/dist/data-flex.css';
 -->
<!-- flex attribute matching,a simple example of centering child element : -->
  <div flex="main:center cross:center" style="width:500px; height: 500px; background: #108423">
    <div style="background: #fff"> to see if this is in the center </div>
  </div>

<!-- data-flex attribute matching,a simple example of centering child element: -->
  <div data-flex="main:center cross:center" style="width:500px; height: 500px; background: #f1d722">
    <div style="background: #fff"> to see if this is in the center </div>
  </div>

collection of flex attributes

dir: axis direction
    top:from top to bottom
    right:from right to left
    bottom:from bottom to top
    left:from left to right( default )
main:axis align
    right:from right to left
    left:from left to right ( default )
    justify:justify align
    center:center align
cross:cross axis align
    top:from top to bottom ( default )
    bottom:from top to bottom
    baseline:baseline align
    center:center align
    stretch:cover whole area 
box:child element setup 
    mean:space is split by child elements equally
    first:spare space is  not given to the first element and split by the rest of child elements equally
    last:spare space is  not given to the last element and split by the rest of child elements equally
    justify:spare space is  not given to both of the first element of each end 
	and split by the rest of child elements equally

flex-box attributes description

values range ( 0-10 ), how to asign spare space to individual child element: if the value equals 0,there won't 
be any spare space for this child element.
spare space assignment = current value of flex-box / the sum of all values of child element's flex-box 

demo

demo