文件列表:

dist (0, 2022-07-18)
dist\data-flex.css (5465, 2022-07-18)
dist\flex.css (5125, 2022-07-18)
docs (0, 2022-07-18)
docs\zh-ch.md (4265, 2022-07-18)
gulpfile.js (903, 2022-07-18)
package.json (786, 2022-07-18)
shot (0, 2022-07-18)
shot\QR-code.png (1511, 2022-07-18)
shot\QR-code1.png (5389, 2022-07-18)
shot\caniuse.png (48956, 2022-07-18)
src (0, 2022-07-18)
src\data-flex.less (124, 2022-07-18)
src\flex-app.less (4562, 2022-07-18)
src\flex.less (97, 2022-07-18)

[](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 ``` ### 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/)

近期下载者：

相关文件：

评论：[我要评论] [举报此文件]

收藏者：