伸缩盒子案例：宽高自动适应

最新推荐文章于 2024-06-25 21:39:50 发布

xqiitan

最新推荐文章于 2024-06-25 21:39:50 发布

阅读量1.3k

点赞数

分类专栏： h5 CSS

本文链接：https://blog.csdn.net/xqiitan/article/details/88532585

版权

h5 同时被 2 个专栏收录

48 篇文章 0 订阅

订阅专栏

CSS

27 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伸缩盒子案例：宽高自动适应</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			.layout {
				width: 500px;
				height: 600px;
				background-color: #CCCCCC;
				margin: 10px auto;
				/* 设置父容器为伸缩盒子 */
				display: flex;
				/* 默认主轴方向是row, 需要以列的方式排列 */
				flex-direction: column;
			}
			header {
				width: 100%;
				height: 60px;
				background-color: red;
			}
			main{
				width: 100%;
				background-color: green;
				flex: 1;
				/* 设置main为伸缩盒子*/
				display: flex; 
			}
			main>article {
				height: 100%;
				flex: 1;
				background-color: pink;
			}
			main>aside{
				height: 100%;
				flex: 3;
				background-color: fuchsia;
			}
			
			footer{
				width: 100%;
				height: 80px;
				background-color: yellow;
			}
			
		</style>
	</head>
	<body>
		<div class="layout">
			<header></header>
			<main>
				<article></article>
				<aside></aside>
			</main>
			<footer></footer>
		</div>
	</body>
</html>