大概了解了flexbox

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>FLEX</title>
</head>
<body>
<style>
footer{
	display:flex;
	flex-flow:row wrap;
	align-items: stretch;
	/*
	justify-content : flex-end;
	主轴排列方式
	*/
	/*
	justify-content : flex-start;
	*/
	justify-content : center;
	/*
	justify-content : space-between;
	*/
	
	align-content : flex-start;
	/*
	侧轴排列方式
	flex-end : 开头
	center 中心
	space-between 均匀排列
	space-around 另一种均匀排列
	stretch 伸缩排列
	*/
}
div{
	/*
	flex: 1 0 7rem;
	width:15%;
	*/
}
div:nth-child(1){
	/*flex和在sencha里面的flex一样的
	flex-grow flex-shrink flex-basis;
	*/
	flex : 1; 
}
div:nth-child(2){
	/*
	在不改变结构的情况下,更改页面排列方式
	*/
	order :  1;
	flex : 2
}
</style>
<!--
神奇的flex布局..
-->
<footer>
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</footer>
</body>
</html>

  

posted @ 2014-03-13 11:00  方方和圆圆  阅读(295)  评论(0编辑  收藏  举报

再过一百年, 我会在哪里?