flex兼容写法

最新推荐文章于 2023-02-16 16:43:46 发布

铁锤妹妹头发多

最新推荐文章于 2023-02-16 16:43:46 发布

阅读量1k

点赞数

分类专栏：前端脑子里进的水文章标签： html css 前端 flex 兼容

本文链接：https://blog.csdn.net/SSS_Benjamin/article/details/105851143

版权

前端同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

脑子里进的水

12 篇文章 0 订阅

订阅专栏

前端开发的时候用flex布局会非常方便，但是flex本身存在兼容问题（虽然一直没遇到过这一问题。。。）
直接在css文件中用flex兼容性写法会使得整个css特别长，开发和阅读很不方便，可以将flex兼容性写法单独保存为一个css文件，引入在html中再调用class即可
下面整理了我个人常用的几个css属性的兼容性写法，整理自Flex布局兼容性，想要其他属性或更详细讲解的可以进原博阅读

.flex {
	display: -webkit-box;  /* 老版本语法: Safari 3.1-6,  iOS 6-, Android browser, older WebKit browsers.  */
	display: -moz-box;    /* 老版本语法: Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;  /* 混合版本语法: IE 10 */
	display: -webkit-flex;  /* 新版本语法： Chrome 21+ */
	display: flex;       /* 新版本语法： Opera 12.1, Firefox 22+ */
}
.flex-v {
 	/***兼容性写法***/
  -moz-box-orient:vertical; /* Firefox */
  -webkit-box-orient:vertical; /* Safari、Opera 以及 Chrome */
  box-orient:vertical;
	-ms-flex-direction: column;
  -webkit-flex-direction: column; /* Safari */
  flex-direction: column;
}
.flex-align-center {
  /*老版本语法*/
  -webkit-box-align: center;
  -moz-box-align: center;
  /*混合版本语法*/
  -ms-flex-align: center;
  /*新版本语法*/
  -webkit-align-items: center; /* Safari */
  align-items: center;
}
.flex-align-start {
 	/*老版本语法*/
  -webkit-box-align: start;
  -moz-box-align: start;
  /*混合版本语法*/
  -ms-flex-align: start;
  /*新版本语法*/
  -webkit-align-items: flex-start; /* Safari */
  align-items: flex-start;
}
.flex-align-end {
	 /*老版本语法*/
  -webkit-box-align: end;
  -moz-box-align: end;
  /*混合版本语法*/
  -ms-flex-align: end;
  /*新版本语法*/
  -webkit-align-items: flex-end; /* Safari */
  align-items: flex-end;
}
.flex-pack-center {
  /*老版本语法*/
  -webkit-box-pack: center;
  -moz-box-pack: center;
  /*混合版本语法*/
  -ms-flex-pack: center;
  /*新版本语法*/
  -webkit-justify-content: center; /* Safari */
  justify-content: center;   
}
.flex-pack-justify {
  /*老版本语法*/
	-webkit-box-pack: justify;
	-moz-box-pack: justify;
	/*混合版本语法*/
	-ms-flex-pack: justify;
	/*新版本语法*/
	-webkit-justify-content: space-between; /* Safari */
	justify-content: space-between;
}
.flex-pack-distribute {
  /*混合版本语法*/
  -ms-flex-pack: distribute;
  /*新版本语法*/
  -webkit-justify-content: space-around; /* Safari */
  justify-content: space-around;
}
.flex-pack-start {
	/*老版本语法*/
  -webkit-box-pack: start;
  -moz-box-pack: start;
  /*混合版本语法*/
  -ms-flex-pack: start;
  /*新版本语法*/
  -webkit-justify-content: flex-start; /* Safari */
  justify-content: flex-start;
}
.flex-pack-end {
	/*老版本语法*/
  -webkit-box-pack: end;
  -moz-box-pack: end;
  /*混合版本语法*/
  -ms-flex-pack: end;
  /*新版本语法*/
  -webkit-justify-content: flex-end; /* Safari */
  justify-content: flex-end;
}

将全部代码存为一个css文件引入html文件即可
flex兼容写法到这里就结束了，有错误欢迎指出，后面内容是怕忘记了顺带记录一下

其他个人习惯

下面的css可以去掉页面多余白边和使用百分比

html,body{
	height: 100%;
	width: 100%;
	margin: 0;
	min-width: (最小宽度);
}

下面在上面的基础上可以避免页面文字被选中

html,body{
	height: 100%;
	width: 100%;
	margin: 0;
	min-width: (最小宽度);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}