CSS3 Flexbox伸缩布局

伸缩布局盒模型（Flexible Box）
用来提供一个更加有效的方式制定、调整和分布一个容器里大小是未知或者动态的项目布局。

优点：轻松的实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变，同时减少了依赖于浮动布局实现元素位置的定义以及重置元素的大小。

[b]如何创建？[/b]

.flexcontainer{ display: -webkit-flex; display: flex; }

属性：flex-direction来改变主轴方向，默认值是row

[color=green]flex项目移动到顶部:row--->align-items设置；column--->justify-content设置。移动到底部值为flex-end;即可。
flex项目移动到左边:row--->justify-content设置；column--->align-items设置。移动到右边值为flex-end;即可。
水平垂直居中设置为center即可。[/color]

<style type="text/css">
	.flexcontainer{
		border:1px solid gray; 
		display: -webkit-flex; 
		display: flex; 		
	}
	.flexchild{
		border:1px solid blue;
		height:30px;
		width:30px;
		margin: 4px; 
	}
	.row{
	   -webkit-flex-direction: row; 
	   flex-direction: row;
	}
	.column{
		-webkit-flex-direction: column; 
 		flex-direction: column; 
	}
	p{
		color:green;
	}
	.row_left{	  
	   -webkit-justify-content: flex-start; 
	   justify-content: flex-start; 	
	}	
	.row_right{		
	   -webkit-justify-content: flex-end; 
	   justify-content: flex-end; 	
	}
	.row_top{
		height:100px; 	 
	   -webkit-align-items: flex-start; 
	   align-items: flex-start; 
	}
	.row_bottom{
		height:100px; 		
	   -webkit-align-items: flex-end; 
	   align-items: flex-end; 	
	}
	.col_left{
 		-webkit-align-items: flex-start; 
 		align-items: flex-start;
	}
	.col_right{ 
 		-webkit-align-items: flex-end; 
 		align-items: flex-end;
	}
	.col_top{
	    height:170px; 
		-webkit-justify-content: flex-start; 
		justify-content: flex-start; 
	}
	.col_bottom{
		height:170px;
		-webkit-justify-content: flex-end; 
		justify-content: flex-end; 
	}
	.center{ 
		-webkit-align-items: center; 
		align-items: center; 
		-webkit-justify-content: center; 
		justify-content: center; 
	}
</style>

[img]http://dl2.iteye.com/upload/attachment/0107/0925/b219cf4e-0909-36b2-9b71-28f644a107fa.jpg[/img]
[img]http://dl2.iteye.com/upload/attachment/0107/0927/3f3d93fc-0b33-3f1b-bccc-d0c8b564dc3b.jpg[/img]
[img]http://dl2.iteye.com/upload/attachment/0107/0929/fd3c6b07-ebd5-35fb-856a-163b7b2ddf20.jpg[/img]
[b]如何实现伸缩？[/b]
给每个flex项目设置flex属性设置需要伸缩的值:

.bigitem{ -webkit-flex:200; flex:200;}  
.smallitem{ -webkit-flex:100; flex:100;}

[img]http://dl2.iteye.com/upload/attachment/0107/0933/d8a4ead5-45c4-3fe9-95a1-1e56b999ac43.jpg[/img]