css3 之 一行分列自适应

一行分列并自适应有很多方法，此次使用方法为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;
}

 效果（忽律两边的黑边）：