flex.css,移动端flex布局神器,兼容微信,UC,webview等移动端主流浏览器08.10
发布于 1 年前 作者 1340641314 12652 次浏览 最后一次编辑是 7 个月前 来自 分享

npm npm npm

download

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

npm

npm install flex.css --save

为什么需要flex.css?

在移动端开发中,并不是所有的浏览器,webview,微信等各种版本都支持标准的flex,
但是基本上都会支持-webkit-box,所以flex.css的主要作用是保证每一个属性都能支持标准flex或旧版本的-webkit-box。
由于flex.css采用了autoprefixer编译,所以能够保证在浏览器不支持标准flex布局的情况下,
回滚到旧版本的-webkit-box,保证移动设备中能呈现出一样的布局效果。
于是,一款移动端快速布局的神器诞生了...

merits

简洁的api,熟悉的属性值,入门毫无压力。
在html中采用属性的方式布,将布局和css进行分离,清晰的布局结构让你更容易维护,可以在不更改css的情况下更改布局。
特别是在React中使用data-flex属性布局,维护起来更加的方便。

support

flex布局分为旧版本dispaly: box;,过渡版本dispaly: flexbox;,以及现在的标准版本display: flex;

Android
  2.3 开始就支持旧版本 display:-webkit-box;
  4.4 开始支持标准版本 display: flex;

IOS
  6.1 开始支持旧版本 display:-webkit-box;
  7.1 开始支持标准版本 display: flex;

PC
  如果你不需要兼容ie10以下版本,也是可以使用flex.css

flex.css同时能兼容新版本和旧版本,保证了浏览器不支持新版本时,回退到旧版本。

Alt text

use

<!--
  将dist目录下的css文件引入到你的页面中,根据你的需要引入
  flex.css 使用flex属性匹配
  data-flex.css 使用data-flex属性匹配(React使用)
  如果使用了webpack打包,npm安装后,并且配置了ES6编译器的话,
  flex 属性匹配可以直接使用:
    import 'flex.css';
  data-flex 属性匹配可以直接使用(react使用)
    import 'flex.css/dist/data-flex.css';
 -->
<!-- flex属性匹配,简单的子元素居中例子: -->
  <div flex="main:center cross:center" style="width:500px; height: 500px; background: #108423">
    <div style="background: #fff">看看我是不是居中的</div>
  </div>

<!-- data-flex属性匹配,简单的子元素居中例子: -->
  <div data-flex="main:center cross:center" style="width:500px; height: 500px; background: #f1d722">
    <div style="background: #fff">看看我是不是居中的</div>
  </div>

flex属性大全

dir:主轴方向
    top:从上到下
    right:从右到左
    bottom:从上到下
    left:从左到右(默认)
main:主轴对齐方式
    right:从右到左
    left:从左到右(默认)
    justify:两端对齐
    center:居中对齐
cross:交叉轴对齐方式
    top:从上到下
    bottom:从上到下
    baseline:跟随内容高度对齐
    center:居中对齐
    stretch:高度并排铺满(默认)
box:子元素设置
    mean:子元素平分空间
    first:第一个子元素不要多余空间,其他子元素平分多余空间
    last:最后一个子元素不要多余空间,其他子元素平分多余空间
    justify:两端第一个元素不要多余空间,其他子元素平分多余空间

flex-box属性说明

取值范围(0-10),单独设置子元素多余空间的如何分配,设置为0,则子元素不占用多余的多余空间
多余空间分配 = 当前flex-box值/子元素的flex-box值相加之和

adviertisement

深圳html5开发者社群:170761660
NodeJS前端分享群:133240225

demo

demo

38 回复

不错不错,以后就用 flex 来写微信布局了

Are you sure? uc不支持display:flex

@dlutwuwei overflow: hidden; display: -webkit-box; display: -webkit-flex; display: flex;

新旧版本两种语法都写了,不支持新版本,会调用旧版本的语法,只要调用flex.css就能兼容了

@XGHeaven 我也是很烦每次都要写新版本和旧版本的兼容语法,所以才整理处理,写了这个flex.css类库

display: flex; —>

display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;

这种事给 autoprefixer 来做就好啦

@aidenzou 第一次听说这个,长见识了

@1340641314 UC用的是display:box,这个标准大部分浏览器都不支持

@1340641314 你的想法是好的,像 @aidenzou 说的把这部分交给工程化吧。更能提高开发体验。

@dlutwuwei 所以才写了两个版本,才能保证使用

@yunkou 你说的那个是把写的css编译成兼容的吧,我这个写的是一个快速布局的class,直接拿去调用就可以直接布局

用less封个函数也行啊,没必要单独分个css文件出来吧

一开始还以为是做了兼容,让不支持 flex 的浏览器也能实现差不多的效果。 如果只是在语法上做兼容的话,是不是直接 autoprefixer 就可以了,感觉这个项目意义不大。

@baka397 你都没看明白,这是把flex布局常用的布局封装成class,div布局时直接调用class就布局出来了,而不是每一次要使用的时候都去写一次css

@kisnows autoprefixer 还需要自己写css,这个是把flex常用的css都封装好了,直接调用相关的class就可以直接布局了,而不用你再次写css

@1340641314 写错,是没必要单独分个class出来

@baka397 现在我已经改过来了,使用属性来匹配。主要是想把布局和ui效果的样式分开,这样开发效率比较快

楼主用安卓测过吗?

@hezedu 一直都在用

@aidenzou 今天做了更新,将原来使用class编写布局修改成属性的方式,这样易于维护和开发,将自己写的class分离,互不干扰

版本更新,人工自顶!

增加使用npm安装

有没有不支持flex的手机?

@yakczh UC和微信在升级内核之前,都是只支持-webkit-box

update document

能不能总结一下,你是如何做到兼容 uc 浏览器的

@dd1994 使用了autoprefixer插件编译,添加了-webkit-box,flexbox, flex三个版本,UC支持-webkit-box <br><br>来自<a href=“https://1340641314.github.io/react-cnode/” target="_blank">react-cnode手机版</a>

你这个在safari上有bug,我最近用了,box:first 这种自适应的在safari上要加flex-grow: 1; flex-shrink: 1; flex-basis: 0;这三个属性

@FlyerJay 能给个具体的例子吗?我测试试试

@FlyerJay 我在mac下面的safari浏览器能够测试成功

@FlyerJay 好的,明天我测试一下

作者你好,这个安卓版本的uc貌似不支持 flex-wrap这个换行属性啊!请问你怎么处理的呢

回到顶部