用Flex页面布局的小尝试

看了阮一峰 Flex布局教程 之后，尝试写了一个简单的布局。

页面：

<html>
	<body>
		<div id='header'></div>
		<div id='sider'></div>
		<div id='main'></div>
		<div id='footer'></div>	
	</body>    
</html>

样式：

html,body{
	margin: 0;
	padding: 0;
	height: 100%;
}
body{
	display: flex;
	flex-wrap: wrap;
}
#header{
	background: red;
	height: 60px;
	width: 100%;
}
#sider{
	background: yellow;
	width: 20%;
	height: 100%;
}
#main{
	background: black;
	width: 80%;
}
#footer{
	background: green;
	width: 100%;
	height: 30px;
}

效果：