当前位置： 移动技术网 > IT编程>网页制作>CSS > flex兼容性写法

flex兼容性写法

2020年04月20日  | 移动技术网IT编程  | 我要评论

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

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

模板css：

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

模板html：

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>    
</div>

横轴的模板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    等间距排列，首尾留白
	*/
}

　　

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网