Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lzxb/flex.css
flex.css is declarative layout which is compatible with wechat, UC, webview and other main-stream mobile browser and surpports react, vue, angular.
https://github.com/lzxb/flex.css
angular css flex flex-layout flexbox flexbox-css flexible react vue
Last synced: 4 months ago
JSON representation
flex.css is declarative layout which is compatible with wechat, UC, webview and other main-stream mobile browser and surpports react, vue, angular.
- Host: GitHub
- URL: https://github.com/lzxb/flex.css
- Owner: lzxb
- Created: 2016-02-26T02:42:51.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-07-18T02:54:57.000Z (almost 2 years ago)
- Last Synced: 2024-01-12T20:31:56.904Z (5 months ago)
- Topics: angular, css, flex, flex-layout, flexbox, flexbox-css, flexible, react, vue
- Language: Less
- Homepage:
- Size: 431 KB
- Stars: 1,547
- Watchers: 69
- Forks: 362
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Lists
- awesome-stars - flex.css - flex.css is declarative layout which is compatible with wechat, UC, webview and other main-stream mobile browser and surpports react, vue, angular. (CSS)
- awesome-stars - flex.css - flex.css is declarative layout which is compatible with wechat, UC, webview and other main-stream mobile browser and surpports react, vue, angular. (CSS)
- awesome-stars - flex.css - flex.css is declarative layout which is compatible with wechat, UC, webview and other main-stream mobile browser and surpports react, vue, angular. (CSS)
- my-awesome-stars - lzxb/flex.css - flex.css is declarative layout which is compatible with wechat, UC, webview and other main-stream mobile browser and surpports react, vue, angular. (CSS)
README
[](https://www.npmjs.com/package/flex.css) [](https://www.npmjs.com/package/flex.css) [](https://www.npmjs.com/package/flex.css)
###
[中文文档入口](https://github.com/lzxb/flex.css/blob/master/docs/zh-ch.md)
如果对状态管理感兴趣，可以看下 [Tms](https://github.com/FollowmeTech/tms)，文档更齐全
### 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.
```
### Use
```html
to see if this is in the center
to see if this is in the center
```
### 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
[](http://lzxb.github.io/flex.css/)
### Other demo
[](https://flexcss.kiduc.com/)