美文网首页
flex布局

flex布局

作者: 小石头的憧憬 | 来源:发表于2018-09-01 19:56 被阅读0次

flex布局在PC端可能兼容性堪忧,但是在移动端可以做兼容性处理,Android2.1起开始支持旧语法,iOS safari从3.2开始支持旧语法。

兼容性测试报告

Android 4.4+ 与ios9+ 支持新语法,不需要做兼容性即可使用。表中查阅可知Android 2.1 - Android 4.3 部分支持旧语法。需使用带有-webkit-前缀的旧语法;支持主轴方向设置、支持主轴对齐、支持侧轴对齐、支持设置显示顺序。不支持换行(box-lines属性无效),即只能做单行。支持box-flex属性,但是因为没有flex-basis属性,需要手动指定width: 0%后可以实现等分。总结:虽然部分功能缺失,但水平垂直居中与等分功能已经可以实现。

代码实现:

/* 父元素-flex容器 */

.flex {

    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */

    display: -moz-box;        /* OLD - Firefox 19- (buggy but mostly works) */

    display: -ms-flexbox;      /* TWEENER - IE 10 */

    display: -webkit-flex;    /* NEW - Chrome */

    display: flex;            /* NEW, Spec - Opera 12.1, Firefox 20+ */

}

/* 子元素-等分 */

.flex1 {

    -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */

    -moz-box-flex: 1;        /* OLD - Firefox 19- */

    -webkit-flex: 1;          /* Chrome */

    -ms-flex: 1;              /* IE 10 */

    flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */

}

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

.flex-h {

    /* 09版 */

    -webkit-box-orient: horizontal;

    /* 12版 */

    -webkit-flex-direction: row;

    -moz-flex-direction: row;

    -ms-flex-direction: row;

    -o-flex-direction: row;

    flex-direction: row;

}

/* 父元素-换行 */

.flex-hw {

    /* 09版 */

    /*-webkit-box-lines: multiple;*/ /* 这个没有效果,W3C上也不建议使用 */

    /* 12版 */

    -webkit-flex-wrap: wrap;

    -moz-flex-wrap: wrap;

    -ms-flex-wrap: wrap;

    -o-flex-wrap: wrap;

    flex-wrap: wrap;

}

/* 父元素-主轴方向居中 */

.flex-hc {

    /* 09版 */

    -webkit-box-pack: center;

    /* 12版 */

    -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    等间距排列,首尾留白

    */

}

/* 父元素-主轴space-between */

.flex-hsbt {

    /* 09版 */

    -webkit-box-pack: justify;

    /* 12版 */

    -webkit-justify-content: space-between;

    -moz-justify-content: space-between;

    -ms-justify-content: space-between;

    -o-justify-content: space-between;

    justify-content: space-between;

    /* 其它取值如下:

        align-items    主轴原点方向对齐

        flex-end        主轴延伸方向对齐

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

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

    */

}

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

.flex-v {

    /* 09版 */

    -webkit-box-orient: vertical;

    /* 12版 */

    -webkit-flex-direction: column;

    -moz-flex-direction: column;

    -ms-flex-direction: column;

    -o-flex-direction: column;

    flex-direction: column;

}

/* 父元素-侧轴居中) */

.flex-vc {

    /* 09版 */

    -webkit-box-align: center;

    /* 12版 */

    -webkit-align-items: center;

    -moz-align-items: center;

    -ms-align-items: center;

    -o-align-items: center;

    align-items: center;

}

/* 子元素-显示在从左向右(从上向下)第1个位置,用于改变源文档顺序显示 */

.flex-1 {

    -webkit-box-ordinal-group: 1;  /* OLD - iOS 6-, Safari 3.1-6 */

    -moz-box-ordinal-group: 1;      /* OLD - Firefox 19- */

    -ms-flex-order: 1;              /* TWEENER - IE 10 */

    -webkit-order: 1;              /* NEW - Chrome */

    order: 1;                      /* NEW, Spec - Opera 12.1, Firefox 20+ */

}

/* 子元素-显示在从左向右(从上向下)第2个位置,用于改变源文档顺序显示 */

.flex-2 {

    -webkit-box-ordinal-group: 2;  /* OLD - iOS 6-, Safari 3.1-6 */

    -moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */

    -ms-flex-order: 2;              /* TWEENER - IE 10 */

    -webkit-order: 2;              /* NEW - Chrome */

    order: 2;                      /* NEW, Spec - Opera 12.1, Firefox 20+ */

}

相关文章

  • flex布局

    认识flex布局 flex布局(Flexible 布局,弹性布局)开启了flex布局的元素叫flex contai...

  • 初见FLEX

    FLEX布局 一种新的布局方式,flex布局 flex布局与方向无关 flex布局可以实现空间自动分配、自动对齐。...

  • Flex 布局教程

    一、Flex 布局教程:语法篇 Flex 布局教程:语法篇 二、Flex 布局教程:实例篇 Flex...

  • css flex布局详解

    css flex布局详解 css flex布局详解1css flex布局详解2

  • Flex

    阮一峰-Flex布局 阮一峰-Flex布局实例教程 Flex布局 块级元素 行内元素 注意,设为 Flex 布局...

  • flex布局学习笔记

    经典教程 Flex 布局教程:语法篇Flex 布局教程:实例篇flex布局游戏 理解 flex布局实现需要至少两层...

  • 6Flex 布局

    Flex,(Flexible Box),意为"弹性布局"采用 Flex 布局的元素,为 Flex 容器(flex ...

  • css flex

    css flex布局 采用 Flex 布局的元素,称为 Flex 容器(flex container),简称“容器...

  • Flex布局(语法篇)

    一、介绍Flex布局 什么是Flex布局呢?Flex布局:又称弹性布局,它是Flexible Box 的缩写,它为...

  • Day02_flex布局

    一、flex布局介绍: 1、又名Flexible 布局,弹性布局;2、开启了 flex 布局的元素叫 flex c...

网友评论

      本文标题:flex布局

      本文链接:https://www.haomeiwen.com/subject/rriuwftx.html