V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
1340641314
V2EX  ›  分享创造

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

  •  
  •   1340641314 ·
    lzxb · 2016-09-07 09:35:34 +08:00 · 7450 次点击
    这是一个创建于 2986 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    demo

    demo

    21 条回复    2016-09-10 22:23:21 +08:00
    SourceMan
        1
    SourceMan  
       2016-09-07 09:54:51 +08:00
    道理我都懂,可你忘了贴上一个可直接点击的 URL : https://github.com/lzxb/flex.css.git
    zhouquanbest
        2
    zhouquanbest  
       2016-09-07 10:33:36 +08:00
    已经在用 感谢作者
    解救了我等前端小白
    1340641314
        3
    1340641314  
    OP
       2016-09-07 14:11:01 +08:00
    @SourceMan 谢谢
    1340641314
        4
    1340641314  
    OP
       2016-09-07 14:12:15 +08:00
    @zhouquanbest 因为以前有一段时间主要的工作就是写 css ,后来才整理出来这个,在 vue , react 的项目中使用很爽
    wtzwutianzhi
        5
    wtzwutianzhi  
       2016-09-07 16:38:08 +08:00
    在低端机器中的兼容性如何?
    1340641314
        6
    1340641314  
    OP
       2016-09-07 20:21:20 +08:00
    @wtzwutianzhi 你是指安卓低版本?低端机器,如果安卓的系统高,一样是可以使用的。
    ChiangDi
        7
    ChiangDi  
       2016-09-07 20:28:49 +08:00 via Android
    支持安卓 4.0 以上吗
    herozzm
        8
    herozzm  
       2016-09-07 20:32:30 +08:00   ❤️ 1
    二维码有问题,扫描后 404
    1340641314
        9
    1340641314  
    OP
       2016-09-07 21:58:50 +08:00
    @herozzm 我晓得了,我前两天修改了用户名,二维码还没有修正
    1340641314
        10
    1340641314  
    OP
       2016-09-07 22:09:08 +08:00
    二维码已经修复
    ianva
        11
    ianva  
       2016-09-07 22:12:38 +08:00
    意义没这么大,比如用 stylus 的话官方的 nib 这个库默认会把 flex 的兼容性自动解决掉,
    如果不用 stylus 的话 autoprefixer 是首选,而且可以按照自己的浏览器兼容要求控制版本
    1340641314
        12
    1340641314  
    OP
       2016-09-07 22:19:52 +08:00
    @ianva 最大的优势,我觉得是不用再写 css 来实现 flex 布局,而是通过属性的方式去实现,页面布局结构,一看 html 就清晰明了。你说的方式以前也并不是没有用过,结果就是常常需要给某个标签添加个 class 来写子元素的分配。属性的方式虽然比不上 class 来得有效率,但是胜在易于维护,随时调整布局。
    microchang
        13
    microchang  
       2016-09-07 22:42:59 +08:00 via Android
    诶。。好像遇上熟人了?
    mzsongyan
        14
    mzsongyan  
       2016-09-07 23:07:16 +08:00   ❤️ 1
    demo 页面中 viewport 的 content 属性值用逗号分隔
    1340641314
        15
    1340641314  
    OP
       2016-09-07 23:18:45 +08:00
    @mzsongyan 谢谢,已修正。果然还是本站大神多,请多多指教
    1340641314
        16
    1340641314  
    OP
       2016-09-07 23:19:12 +08:00
    我好像不认识你
    dnshi
        17
    dnshi  
       2016-09-08 01:34:48 +08:00
    很新颖的方法!我也分享一下我写的吧

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

    我是定义 class 来实现 flex 的效果,毕竟可以充当 grid 嘛。求 star !
    1340641314
        18
    1340641314  
    OP
       2016-09-08 07:36:29 +08:00
    @dnshi 我开始也是使用 class ,但是我发现很容易造成 class 很长,满屏都是各种 class ,从维护的角度来看,我最后才改成属性的方式。
    xcatliu
        19
    xcatliu  
       2016-09-08 10:38:10 +08:00
    支持,有很多可学习的地方
    pynix
        20
    pynix  
       2016-09-08 12:00:35 +08:00
    貌似还是不错的。。。
    fhefh
        21
    fhefh  
       2016-09-10 22:23:21 +08:00
    nice~~~
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2700 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 08:33 · PVG 16:33 · LAX 00:33 · JFK 03:33
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.