css3 之 一行分列自适应

zhanghao 2016-07-19

一行分列并自适应有很多方法,此次使用方法为css3的:flex-flow  属性,方法如下:

display: flex;
flex-flow: row;

 flex-flow取值有:

nowrap
wrap
wrap-reverse
initial
inherit
默认值是 "nowrap"

    

案例:

.container {
	margin: 0;
	padding: 0;
	display: flex;
	flex-flow: row;
	-webkit-flex-flow:row;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-top: -1px;
}
.main {
	flex: 1;
	-webkit-flex:1;
	color: black;
	text-align: center;
	line-height: 20px;
}
.main a {
	color: black;
}
.left img,
.main img,
.right img {
	vertical-align: middle;
}
.left {
	flex: 1;
	-webkit-flex:1;
	text-align: center;
	line-height: 20px;
}
.right {
	flex: 1;
	-webkit-flex:1;
	color: black;
	text-align: center;
	line-height: 20px;
}
.right a {
	color: black;
}

 效果(忽律两边的黑边):


css3 之 一行分列自适应
 

相关推荐

囧芝麻 / 0评论 2019-12-20