zoukankan      html  css  js  c++  java
  • 旧版flexbox局部填坑

    本来昨晚要写一篇react的小笔记,恰好同学小聚的时候附近有个ios维修,把我的4s拿去修好,早上用我还是ios5.1系统的4s打开自己的页面,发现flexbox布局的部分是乱的,眼前一黑。

    what the hell?!

    对了,我的flexbox是用的新语法,网上一查ios6以下只支持旧的flexbox语法,且不支持wrap。啊....好麻烦。。。

    然后上网一番折腾,看了好多文章各种实验,一团mess。因为移动端最常用的是flexbox里边元素均等排列,我就先解决这个,最后终于在国内外众多同行的帮助下测试出一个方案:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
     5     <meta charset="UTF-8">
     6     <title>Document</title>
     7     <style>
     8 .space{
     9   -ms-flex-pack: space-between;
    10   -ms-flex-pack: justify/*针对ie10*/
    11   -webkit-box-pack: justify;
    12   -webkit-justify-content: space-between;
    13   justify-content: space-between;
    14   align-items: center;
    15   -moz-box-align:center;
    16   -webkit-box-align:center;
    17 }
    18 .flex{
    19   display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    20   display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    21   display: -ms-flexbox;      /* TWEENER - IE 10 */
    22   display: -webkit-flex;     /* NEW - Chrome */
    23   display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
    24 }
    25 .c{
    26 width:50px;
    27 height:50px;
    28 background-color: red;
    29   -webkit-box-flex: 0;      /* OLD - iOS 6-, Safari 3.1-6 */
    30   -moz-box-flex: 0;         /* OLD - Firefox 19- */
    31                /* For old syntax, otherwise collapses. */
    32   -webkit-flex: 0 1 auto;          /* Chrome */
    33   -ms-flex: 0 1 auto;              /* IE 10 */
    34   flex: 0 1 auto; 
    35 }
    36 
    37     </style>
    38 </head>
    39 <body>
    40     <div class="flex space">
    41         <div class="flex1 c"></div>
    42         <div class="flex1 c"></div>
    43         <div class="flex1 c"></div>
    44     </div>
    45 </body>
    46 </html>
    View Code

    要注意的是:

    flex中子元素的box-flex属性是将子元素定义成可伸缩的对象,也就是会根据容器的大小自动调整尺寸,默认值是0.但是网上几篇文章给的代码属性值是1,我在测试的以为这个是兼容旧语法的trick,理所当然地以为1表示不伸缩时的尺寸,后来一查才发现设置成正整数是相对其他box-flex的等比放大倍数。

    如果子元素本身有设置了宽度,width:20%;那行是不需要的。

    最后,W3C上说box-align、box-flex这几个css目前没有浏览器支持,只有firefox和chrome等加前缀可以使用......

    其实我是有用autoprefixer的,但是今天才发现对于ios6以下的,autoprefixer没有帮我生成出适合的css...

  • 相关阅读:
    一个例子说明如何在DataSnap中使用FireDAC
    DataSnap Demo:TFDConnection、最大连接数、客户端回叫功能、多线程模拟、压力测试等
    DataSnap Demo:TFDConnection、最大连接数、客户端回叫功能、多线程模拟、压力测试等
    Delphi2010中DataSnap技术网摘
    Delphi2010中DataSnap技术网摘
    推荐大家使用的CSS书写规范、顺序
    Windows autoKeras的下载与安装连接
    vscode Python 运行环境配置
    react框架
    关于k Line Chart (k线图)
  • 原文地址:https://www.cnblogs.com/alan2kat/p/7749695.html
Copyright © 2011-2022 走看看