用Flex页面布局的小尝试

最新推荐文章于 2024-08-16 17:16:00 发布

原创最新推荐文章于 2024-08-16 17:16:00 发布 · 636 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#布局 #flex #css #前端

本文通过一个简单的网页布局实例，展示了如何使用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;
}

效果：