精华内容
下载资源
问答
  • flex兼容性写法

    2020-04-21 17:23:45
    flex很早就出来了,但是由于兼容性很差,一直不火。 目前个人只在手机端中小心翼翼的使用flex,整理个模板出来,横轴的! 模板css: .children{ height: 20px; border: 1px solid red; margin: 2px; } .parent{ ...

    flex很早就出来了,但是由于兼容性很差,一直不火。

    目前个人只在手机端中小心翼翼的使用flex,整理个模板出来,横轴的!

    模板css:

    .children{
    height: 20px;
    border: 1px solid red;
    margin: 2px;
    }
    .parent{
    width: 1000px;
    border:1px solid green;
    }
    模板html:

    横轴的模板flex兼容性写法:

    47
    /* 父元素-横向排列(主轴) */
    .parent{
    display: box;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    flex-direction: row;
    }

    /* 子元素-平均分栏 */
    .child{
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    }

    /* 父元素-横向换行 */
    .parent{
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    }

    /* 父元素-水平居中(主轴是横向才生效) */
    .parent{
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -o-justify-content: center;
    justify-content: center;
    /*其它取值如下:
    align-items 主轴原点方向对齐
    flex-end 主轴延伸方向对齐
    space-between 等间距排列,首尾不留白
    space-around 等间距排列,首尾留白
    */
    }
    亚马逊测评 www.yisuping.com

    展开全文
  • flex 兼容性写法

    2017-12-08 11:24:00
    flex http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 阮一峰老师详解 box 用于父元素的样式: display:box; 该属性会将此元素及其直系子代加入弹性框模型中。(Flexbox 模型只适用于直系子代...

    flex

    http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 阮一峰老师详解

    box

    • 用于父元素的样式:
    1. displaybox; 该属性会将此元素及其直系子代加入弹性框模型中。(Flexbox 模型只适用于直系子代)
    2. box-orient: horizontal | vertical | inherit; 该属性定义父元素的子元素是如何排列的。
    3. box-pack: start | end | center | justify; 设置沿 box-orient 轴的父元素中子元素的排列方式。因此,如果 box-orient 是水平方向,则父元素的子元素是水平的排列方式,反之亦然。(表示父容器里面子容器的水平对齐方式--垂直排列时--定宽)
    4. box-align: start | end | center | baseline | stretch; 基本上而言是 box-pack 的同级属性。设置框的子代在框中的排列方式。如果方向是水平的,该属性就会决定垂直排列,反之亦然。(表示父容器里面子容器的垂直对齐方式--水平排列时--定高)
    • 用于子元素的样式:
    1. box-flex: 0 | 任意数字; 该属性让子容器针对父容器的宽度按一定规则进行划分。

    1.box+flexbox

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

    2.定义子元素排列方式

      /*垂直排列*/
      -webkit-box-orient:vertical;
      -webkit-box-direction:normal;
      -moz-box-orient:vertical;
      -moz-box-direction:normal;
      -webkit-flex-direction:column; /*flexbox下竖向排列*/
      -ms-flex-direction:column;
      flex-direction: column;
        /*换行处理*/
        -webkit-box-lines: multiple;
        -ms-box-lines:multiple ;
        -moz-box-lines:multiple; /*实验性质*/
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        -o-flex-wrap: wrap;
        flex-wrap: wrap;
        /*对齐方式*/
        -webkit-box-pack: center;
        -moz-box-pack: center;
        -ms-box-pack: center;
        -webkit-justify-content: center;
        -moz-justify-content: center;
        -ms-justify-content: center;
        -o-justify-content: center;
        justify-content: center;    

    -0-竖向排列box-align,flex:align-items

    -0-伸缩性 box-flex

        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;

     

      

    转载于:https://www.cnblogs.com/huangmin1992/p/8004557.html

    展开全文
  • 本文将要为您介绍的是flex兼容性写法,具体完成步骤:flex很早就出来了,但是由于兼容性很差,一直不火。目前个人只在手机端中小心翼翼的使用flex,整理个模板出来,横轴的!模板css:.children{height: 20px;border: ...

    本文将要为您介绍的是flex兼容性写法,具体完成步骤:

    flex很早就出来了,但是由于兼容性很差,一直不火。

    目前个人只在手机端中小心翼翼的使用flex,整理个模板出来,横轴的!

    模板css:

    .children{

    height: 20px;

    border: 1px solid red;

    margin: 2px;

    }

    .parent{

    width: 1000px;

    border:1px solid green;

    }

    模板html:

    横轴的模板flex兼容性写法:

    /* 父元素-横向排列(主轴) */

    .parent{

    display: box;

    display: -webkit-box;

    display: -moz-box;

    display: -ms-flexbox;

    display: -webkit-flex;

    display: flex;

    -webkit-flex-direction: row;

    -moz-flex-direction: row;

    -ms-flex-direction: row;

    -o-flex-direction: row;

    flex-direction: row;

    }

    /* 子元素-平均分栏 */

    .child{

    -webkit-box-flex: 1;

    -moz-box-flex: 1;

    -webkit-flex: 1;

    -ms-flex: 1;

    flex: 1;

    }

    /* 父元素-横向换行 */

    .parent{

    -webkit-flex-wrap: wrap;

    -moz-flex-wrap: wrap;

    -ms-flex-wrap: wrap;

    -o-flex-wrap: wrap;

    flex-wrap: wrap;

    }

    /* 父元素-水平居中(主轴是横向才生效) */

    .parent{

    -webkit-justify-content: center;

    -moz-justify-content: center;

    -ms-justify-content: center;

    -o-justify-content: center;

    justify-content: center;

    /*其它取值如下:

    align-items 主轴原点方向对齐

    flex-end 主轴延伸方向对齐

    space-between 等间距排列,首尾不留白

    space-around 等间距排列,首尾留白

    */

    }

    flex兼容性写法就为您介绍到这里,感谢您关注懒咪学编程c.lanmit.com.

    本文地址:https://c.lanmit.com/Webqianduan/htmlyucss/38672.html

    展开全文
  • .flex-direction_column{ -webkit-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } /*主轴对齐*/ .justify-content_flex-center{ -webkit-box-...
  • 本次记录的主要内容在于 兼容写法  下面的测试代码为常用的;具体的属性值,按照实际需求,自行修改 实现代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...

     

    本次记录的主要内容在于 兼容写法 

    下面的测试代码为常用的;具体的属性值,按照实际需求,自行修改

    需要注意的是 在IE下  如果要实现垂直居中的话  父元素  必须要设置高度 或者设置高度auto 

    在其他浏览器设置min-height生效  但是在IE下  min-height加垂直居中

    实现代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
    
            /* 基本弹性盒子 */
            .demo{
                display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */  
                display: -moz-box; /* Firefox 17- */  
                display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */  
                display: -moz-flex; /* Firefox 18+ */  
                display: -ms-flexbox; /* IE 10 */  
                display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
            }
    
            /* 方向 横向*/
            .directionrow{
                -webkit-box-orient: vertical;
                -ms-flex-direction: row;
                -webkit-flex-direction: row;
                flex-direction: row;
            }
    
            /* 方向 竖向*/
            .directioncol{
                -webkit-box-orient: vertical;
                -ms-flex-direction: column;
                -webkit-flex-direction: column;
                flex-direction: column;
            }
    
            /* 竖向剧中 */
            .align{
                -webkit-box-align: center;
                -ms-flex-align: center;
                -webkit-align-items: center;
                align-items: center;
            }
    
            /* 横向剧中 */
            .justify{
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
            }
    
            /* 换行 */
            .wrap{
                -webkit-flex-wrap: wrap;  
                -moz-flex-wrap: wrap;  
                -ms-flex-wrap: wrap;  
                -o-flex-wrap: wrap;  
                flex-wrap: wrap;
            }
    
            /* 自适应 */
            .flex{
                width: 0;
                -webkit-box-flex: 1;
                -ms-flex: 1;
                -webkit-flex: 1;
                flex: 1;
            }
    
            .demo{
                min-height:80px;
                border-bottom: 1px solid #000000;
                border-top: 1px solid #000000;
                width: 300px;
                margin:30px auto;
            }
    
            h1{
                width: 300px;
                margin:30px auto;
                text-align: center;
            }
    
            .demo-1{
                width: 40px;
                height: 40px;
                border: 1px solid #DDDDDD;
                margin: 5px;
            }   
        </style>
    </head>
    <body>
        <h1>横向排列(默认)</h1>
        <div class="demo directionrow">
            <div class="demo-1"></div>
            <div class="demo-1"></div>
            <div class="demo-1"></div>
        </div>
        <h1>竖向排列</h1>
        <div class="demo directioncol">
            <div class="demo-1"></div>
            <div class="demo-1"></div>
            <div class="demo-1"></div>
        </div>
        <h1>横向居中</h1>
        <div class="demo justify">
            <div class="demo-1"></div>
            <div class="demo-1"></div>
            <div class="demo-1"></div>
        </div>
        <h1>垂直居中</h1>
        <div class="demo align">
            <div class="demo-1"></div>
            <div class="demo-1"></div>
            <div class="demo-1"></div>
        </div>
        <h1>横向垂直居中</h1>
        <div class="demo align justify">
            <div class="demo-1"></div>
            <div class="demo-1"></div>
            <div class="demo-1"></div>
        </div>
        <h1>不换行</h1>
        <div class="demo">
            <div class="demo-1"></div>
            <div class="demo-1"></div>
            <div class="demo-1"></div>
            <div class="demo-1"></div>
            <div class="demo-1"></div>
            <div class="demo-1"></div>
            <div class="demo-1"></div>
            <div class="demo-1"></div>
            <div class="demo-1"></div>
            <div class="demo-1"></div>
            <div class="demo-1"></div>
            <div class="demo-1"></div>
        </div>
        <h1>换行</h1>
        <div class="demo wrap">
            <div class="demo-1"></div>
            <div class="demo-1"></div>
            <div class="demo-1"></div>
            <div class="demo-1"></div>
            <div class="demo-1"></div>
            <div class="demo-1"></div>
            <div class="demo-1"></div>
            <div class="demo-1"></div>
            <div class="demo-1"></div>
            <div class="demo-1"></div>
            <div class="demo-1"></div>
            <div class="demo-1"></div>
        </div>
        <h1>自适应(设置于子级)</h1>
        <div class="demo">
            <div class="demo-1"></div>
            <div class="demo-1 flex"></div>
            <div class="demo-1"></div>
        </div>
    </body>
    </html>

    具体效果

    展开全文
  • Flex兼容性写法(转)

    2017-08-02 11:00:37
    一.W3C各个版本的flex 2009 version 标志:display: box; or a property that is box-{*} (eg. box-pack) 2011 version 标志:display: flexbox; or the flex() function or flex-pack property 2012 version ...
  • flex兼容写法

    2020-04-29 23:22:09
    直接在css文件中用flex兼容性写法会使得整个css特别长,开发和阅读很不方便,可以将flex兼容性写法单独保存为一个css文件,引入在html中再调用class即可 下面整理了我个人常用的几个css属性的兼容性写法,整理自Flex...
  • flex布局兼容性写法

    万次阅读 2016-09-30 14:45:28
    CSS弹性盒模型 flex布局兼容性写法CSS样式 flex:定义布局为盒模型 flex-v:盒模型垂直布局 flex-1:子元素占据剩余的空间 flex-align-center:子元素垂直居中 flex-pack-center:子元素水平居中 flex-pack-justify...
  • 今天还是变谈CSS3里的flex怎么处理兼容的flex是个非常好用的属性,如果说有什么可以完全代替 float 和 position ,那么肯定是非它莫属了,虽然现在低版本浏览器不支持,可是对于移动来说兼容性不是问题,可是在安...
  • 常用的flex布局兼容性写法 //定义flex .flex{ display:-webkit-flex;/*新版本语法:Chrome21+*/ display:-webkit-box;/*老版本语法:Safari,iOS,Androidbrowser,olderWebKitbrowsers.*/ display:-moz-box;/*老...
  • Flex布局兼容性写法

    万次阅读 2016-02-03 17:12:00
    flex布局目前可使用在移动中,并非所有的语法都全兼容,但以下写法效果良好~ /* ============================================================ flex:定义布局为盒模型 flex-v:盒模型垂直布局 flex-1:子...
  • flex版本的兼容性写法

    2017-11-08 15:41:13
    有关flex兼容性

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,464
精华内容 1,785
关键字:

flex的兼容性写法