网站首页 » 前端开发 » CSS3 » FLEX 布局中的兼容性写法汇总
上一篇:
下一篇:

FLEX 布局中的兼容性写法汇总

前言

随着浏览器的发展 FLEX 布局已经慢慢地走进了前端世界,虽然这样,但 FLEX 在实际的使用当中我们还得考虑下它的兼容性问题。即使现在已经是移动端横行霸道的时代,并且老版本的 IE 也已经慢慢退出历史的舞台,但浏览器之间也还是坚持着自己的一套方案。所以在这里有必要,也应该为给自己整理下 FLEX 布局当中的一些兼容性写法。虽然有很多编辑器也已经很智能,自带自动补全功能。

FLEX 兼容性之旅

display:flex

设置弹性盒子
display: -webkit-box; /* 老版本语法( Safari, iOS, Android browser, older WebKit browsers) */
display: -moz-box;/* 老版本火狐语法 */
display: -ms-flexbox; /* 混合版本语法: IE 10 */

/* 新语法 */
display: -webkit-flex;
display: flex;

flex:1

子元素占满剩余空间
-webkit-box-flex: 1;
-moz-box-flex: 1;

/* 新语法 */
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;

flex-direction:column

子元素垂直排列
/* 老版本语法 */
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-orient: vertical;
-moz-box-direction: normal;

/* 新版本语法 */
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;

justify-content:center

子元素水平居中
/* 老版本语法 */
-webkit-box-pack: justify;
-moz-box-pack: justify;
-ms-flex-pack: justify;

/* 新版本语法 */
-webkit-justify-content: center;
 -moz-justify-content: center;
 justify-content: center;

align-item:center

子元素垂直居中
/* 老版本方法 */
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align:center; /* 混合语法 */

/* 新版本语法 */
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;

不管是在 PC 端还是在移动端都强烈建议添加前缀,在平时的开发中自己也深有体会,因为前缀出问题的手机我遇到过的就是 锤子手机、魅族手机。

带 -webkit- 前缀的为支持 Safari, Chrome, and Opera 等浏览器。带 -moz- 前缀的为支持火狐浏览器,带 -ms- 的为支持 IE 浏览器

相关资料

https://www.w3.org/html/ig/zh/css-flex-1/

http://www.w3.org/TR/css3-flexbox/

http://yunkus.com/css3-flexbox-usage/

 

 

文章关键词:
  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/flex-layout-compatibility-writing-summary/

Leave a Reply

Your email address will not be published. Required fields are marked *

评论 END