CSS旧版flex及兼容

×

目录

[1]适用范围 [2]伸缩项目 [3]伸缩流方向[4]伸缩流换行[5]主轴对齐[6]伸缩性[7]显示顺序[8]flex兼容

前面的话

  flex弹性盒模型有3个版本: 旧版本、混合版本和新版本。如果要保证flex弹性盒模型在各个主流浏览器上表现一致,就必须掌握这3个版本的不同用法。深入理解CSS弹性盒模型flex已经详细介绍过其基本用法,本文主要介绍旧版本flex的不同之处及兼容写法

适用范围

  旧版本flex是指最早的flex版本,该版本的flex应用在safari3.1-6(主要表现在windows系统下的safari浏览器)、ios3.2-6.1、android2.1-4.3。且都需要添加-webkit-前缀

伸缩项目

   旧版本flex要求伸缩项目必须是block元素

<span>
    <span>项目一</span>
    <span>项目二</span>
    <span>项目三</span>
    <span>项目四</span>
</span>

伸缩流方向

  旧版本flex的伸缩流方向中的reverse值,只改变伸缩项目的排列顺序,并不改变其对齐方式。所以建议使用direction:rtl来实现伸缩流反向效果

伸缩流换行

  旧版本flex不支持伸缩流换行,所以在其他版本flex中尽量不要使用换行操作

主轴对齐

  旧版本flex的主轴对齐属性中没有扩散对齐属性值,所以在其他版本flex中尽量不要使用该属性值

伸缩性

  旧版本flex的伸缩性只有一个值,表示基于伸缩项目本身尺寸大小的扩展或收缩比率,旧版本的-webkit-box-flex:1;相当于新版本的flex:auto;所以要想实现不基于伸缩项目本身尺寸大小的伸缩需要显式地将伸缩项目的宽度width设置为0

  [注意]该值支持小数,但不能为负数

显示顺序

  旧版本flex的显示顺序是以1为默认值的正整数,而新版本flex的显示顺序是以0为默认值的自然数。所以在设置显示顺序时,跳过1,从2开始设置

flex兼容

  以下是flex模块的常用兼容代码

/*display*/
.display_flex{
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.display_flex > *{
    display: block;
}
.display_inline-flex{
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;
}
.display_inline-flex > *{
    display: block;
}
/*伸缩流方向*/
.flex-direction_column{
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}
/*主轴对齐*/
.justify-content_flex-center{
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}
.justify-content_flex-end{
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}
.justify-content_flex-justify{
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
/*侧轴对齐*/
.align-items_flex-start{
    -webkit-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
.align-items_flex-end{
    -webkit-box-align: end;
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
}
.align-items_center{
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.align-items_baseline{
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    -webkit-align-items: baseline;
    align-items: baseline;
}
/*伸缩性*/
.flex_auto{
    -webkit-box-flex: 1;
    -ms-flex: auto;
    -webkit-flex: auto;
    flex: auto;
}
.flex_1{
    width: 0;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}
/*显示顺序*/
.order_2{
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
}
.order_3{
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 3;
    -webkit-order: 3;
    order: 3;
}
时间: 03-27

CSS旧版flex及兼容的相关文章

Flex布局兼容知识点总结

假设父容器class为 box,子项目为item.旧版语法如下:一:定义容器的display属性.旧语法如下写法: .box { display: -moz-box; display: -webkit-box; display: box; } 新版语法需要如下写: .box{ display: -webkit-flex; display: flex; } 或者 行内 .box{ display: -webkit-inline-flex; display:inline-flex; } 二:容器属性

XAMPP 的 Linux 版 (x86 兼容处理器版)安装配置使用详细介绍,教你建好一个LAMPP站!

XAMPP 的 Linux 版 (x86 兼容处理器版) 以前被称作 LAMPP,但为了避免误解,将其重名命为 ?XAMPP 的 Linux 版?.所以,如果您在寻找 LAMPP下载.安装.配置.使用方法,您就来对地方了. 安装过程仅 4 个步骤 步骤 1:下载 只需点击下面的链接.下载最新版总是好主意.:)完整的下载列表(老版本)可在 SourceForge 找到. 详细的 XAMPP 各版本更新记录可在 发布说明 中找到. XAMPP Linux 1.8.2 107 MB Apache 2.

自写图片遮罩层放大功能jquery插件源代码,photobox.js 1.0版,不兼容IE6

阿嚏~~~ 话说本屌丝没啥开发插件的经验,可是天公不作美,公司须要让我自己开发个图片放大的插件 但公司老大的话,宛如吾皇之圣旨,微臣必当肝脑涂地,莫敢不从啊~~~ 于是乎,作为一个超级小白,本人仅仅能瞎研究了,幸好黑天不负屌丝人,本屌丝最终搞出来了,尽管不尽善尽美,可是功能还是能够用的啦 先附上源代码,求各种大神指导: /******************************* * photobox跨浏览器兼容插件 v1.0(不支持IE6) * 格式:<a href="big.jpg

HIVE自定义TextInputFormat (旧版MapReduceAPI ok, 新版MapReduceAPI实现有BUG?)

我们的输入文件 hello0, 内容如下: xiaowang 28 [email protected][email protected] 38 [email protected][email protected] 100 unknown 逻辑上有3条记录, 它们以@[email protected]分隔. 我们将分别用旧版MapReduce API 和新版MapReduce API实现自定义TextInputFormat,然后在hive配置使用, 加载数据. 首先用旧版API 1, 自定义For

创建本地RPM源之更新系统旧版软件

事情起因: 系统版本为Centos6.6 ,因为之前同事没有采用最小化选择性安装,所以系统安装好后自带有mysql5.1的三个安装包: [[email protected] ~]# rpm -qa | grep mysql mysql-5.1.73-3.el6_6.x86_64 mysql-devel-5.1.73-3.el6_6.x86_64 mysql-lib-5.1.73-3.el6_6.x86_64 在安装新版本mysql前,只卸载掉了 mysql 和 mysql-devel,但没能成功

51CTO博客旧版首页截图纪念

2017年7月11日,51CTO博客PC端首页进行改版,这个曾经陪伴了多年的旧版首页已经超期服役,将告别历史舞台,但它也承载了我们很多作者的光荣与梦想.承载了我们很多阅读的时光.特将旧版首页截图保存,以作留念.

(转)Resources和AssetBundle(新旧版)学习

Resources: Resources的缺点:1.与显示Inspector上直接引用相比,Resources使用不方便. 2.不管你Resources上的资源是否调用了,当你发布的时候,Resources上的资源会全部一起打包掉,无法作更新. Resources里的方法: Resources.Load :动态加载特殊文件夹Resources里的文件. Resources.UnloadAsset:回收指定的缓存. Resources.UnloadUnusedAsset:回收没有被引用的缓存 这里

一招解决OpenERP8.0安装旧版模块报错

有喜欢尝鲜的网友开始玩8.0了,可是版本还没发布,社区的很多特别好的模块还没有升级到8,所以经常碰到模块无法安装的问题. No module name osv 网友提出将模块的 from osv import osv,fields 改为 from openerp.osv import osv,fields 其实这是一个编程规范问题,旧版模块代码里很多这种导入方式,一个一个改对于不懂代码的或者openerp新手是不现实的. 众所周知,openerp的运行入口是openerp-server.py,在

4.6之前旧版动画系统(Animation),AI

一:4.6之前旧版动画系统(Animation)二:4.6版本之后新版动画系统(Animator)方法:动画分割方法:(控制动画播放的动画)1. Play2. CrossFade3. CrofdFadeQueuedIsPlaying()指定的动画是否正在播放Stop()停止播放指定的动画属性:isPlaying:当前是否有动画正在播放 Rig标签中的Animation Type要是Legacy(旧版动画系统) 动画融合(通过指定关节来播放动画) 动画帧事件(当动画播放到某一帧时执行指定的方法,比