伸缩弹性flex布局简单实例

CSS3新增的flex页面布局非常灵活，适应性很强。下面展示一个简单的flex例子：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>heartmv.com</title>	
	<style>
		*{margin:0; padding:0;}
		.box{
			width:90%;
			min-height:500px;
			margin:15px auto;
			display:flex;
			flex-direction:column; /*设置子元素垂直排列*/
		}
		header{
			width:100%;
			height:70px;
			line-height:70px;
			background:#ccc;
			text-align:center;
			display:flex;
			justify-content:space-between;
		}
		header>h1{
			width:250px;
		}
		header>nav{
			width:80%;
			height:70px;
			font-size:20px;
			display:flex;
		}
		header>nav>a{
			flex:1; /*设置所有a元素平分nav父元素的宽度*/
			background:#aaa;
			border:1px solid #00f;
			text-decoration:none;
		}
		main{
			width:100%;
			flex:1;
			display:flex;
			margin:15px 0;
		}
		main>article{
			width:80%;
			background:#eee;
			flex:4; /*其一级父元素必须包含display:flex;属性*/
		}
		main>aside{
			width:20%;
			background:#ddd;
			flex:1;
		}
		footer{
			width:100%;
			border-radius:10px;
			border:1px solid #ccc;
		}
		footer>p{
			font-size:18px;
			padding-left:15px;
			line-height:40px;
			background:rgba(0,0,255,0.2);
		}
		footer .link{
			display:flex;
		}
		footer .link>a{
			flex:1;
			line-height:30px;
			text-align:center;
		}
	</style>
</head>

<body>
	<div class="box">
		<header>
			<h1>heartmv.com</h1>
			<nav>
				<a href="#">菜单</a>
				<a href="#">菜单</a>
				<a href="#">菜单</a>
				<a href="#">菜单</a>
				<a href="#">菜单</a>
			</nav>
		</header>
		<main>
			<article></article>
			<aside></aside>
		</main>
		<footer>
			<p>友情链接</p>
			<div class="link">
				<a href="#">淘宝</a>
				<a href="#">京东</a>
				<a href="#">百度</a>
				<a href="#">360</a>
				<a href="#">游戏</a>
				<a href="#">音乐</a>
			</div>
		</footer>
	</div>
</body>
</html>

浏览器效果：