移动端 flex 布局神器，兼容微信， UC， webview 等移动端主流浏览器 ，支持 react， vue， angular

[1340641314]

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 同时能兼容新版本和旧版本，保证了浏览器不支持新版本时，回退到旧版本。

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 值相加之和

demo

[SourceMan]

道理我都懂，可你忘了贴上一个可直接点击的 URL ： https://github.com/lzxb/flex.css.git

[zhouquanbest]

已经在用 感谢作者
解救了我等前端小白

[1340641314]

@SourceMan 谢谢

[1340641314]

@zhouquanbest 因为以前有一段时间主要的工作就是写 css ，后来才整理出来这个，在 vue ， react 的项目中使用很爽

[wtzwutianzhi]

在低端机器中的兼容性如何？

[1340641314]

@wtzwutianzhi 你是指安卓低版本？低端机器，如果安卓的系统高，一样是可以使用的。

[ChiangDi]

支持安卓 4.0 以上吗

[herozzm]

二维码有问题，扫描后 404

[1340641314]

@herozzm 我晓得了，我前两天修改了用户名，二维码还没有修正

[1340641314]

二维码已经修复

[ianva]

意义没这么大，比如用 stylus 的话官方的 nib 这个库默认会把 flex 的兼容性自动解决掉，
如果不用 stylus 的话 autoprefixer 是首选，而且可以按照自己的浏览器兼容要求控制版本

[1340641314]

@ianva 最大的优势，我觉得是不用再写 css 来实现 flex 布局，而是通过属性的方式去实现，页面布局结构，一看 html 就清晰明了。你说的方式以前也并不是没有用过，结果就是常常需要给某个标签添加个 class 来写子元素的分配。属性的方式虽然比不上 class 来得有效率，但是胜在易于维护，随时调整布局。

[microchang]

诶。。好像遇上熟人了？

[mzsongyan]

demo 页面中 viewport 的 content 属性值用逗号分隔

[1340641314]

@mzsongyan 谢谢，已修正。果然还是本站大神多，请多多指教

[1340641314]

我好像不认识你

[dnshi]

很新颖的方法！我也分享一下我写的吧

https://github.com/dnshi/flex.class

我是定义 class 来实现 flex 的效果，毕竟可以充当 grid 嘛。求 star ！

[1340641314]

@dnshi 我开始也是使用 class ，但是我发现很容易造成 class 很长，满屏都是各种 class ，从维护的角度来看，我最后才改成属性的方式。

[xcatliu]

支持，有很多可学习的地方

[pynix]

貌似还是不错的。。。

[fhefh]

nice~~~