css3-flex实现自适应布局

最新推荐文章于 2024-07-31 14:00:57 发布

sam80000

最新推荐文章于 2024-07-31 14:00:57 发布

阅读量556

点赞数

分类专栏：前端知识点文章标签： flex css3

本文链接：https://blog.youkuaiyun.com/sam80000/article/details/111145732

版权

前端知识点专栏收录该内容

35 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
/* 			===============================
			构建思路:利用flex子元素布局的flex-grow,
			对空白空间的占用,非常容易实现自适应布局。
			=============================== */
			*{margin: 0; padding: 0;}
			#main{display: flex;}
			#left{background: yellow; width: 100px; height: 100px;}
			#center{flex: 1; background: #00FFFF;}
			#right{width: 100px; background: red;}
		</style>
	</head>
	<body>
		<div id="main">
			<div id="left"></div>
			<div id="center"></div>
			<div id="right"></div>
		</div>
	</body>
</html>