局弹性盒模型布局

最新推荐文章于 2024-05-25 21:28:45 发布

allWords

最新推荐文章于 2024-05-25 21:28:45 发布

阅读量217

点赞数 1

分类专栏： html 文章标签：弹性盒模型 html

本文链接：https://blog.csdn.net/allWords/article/details/84138387

版权

html 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

1. 垂直方向的布局

<!DOCTYPE html>
<html lang="en"><head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="" />
	<title>弹性盒模型</title>
	<style>
		*{
			margin:0;padding:0;
		}
		#content{
			position:relative;
			width:100%;
			height:100%;
			border:1px solid red;
			
			display:flex;
			flex-wrap:wrap;
			justify-content:space-around;
			align-items:center;
		}
		.div{
			width:100%;
			height:100px;
			border:1px solid black;
		}
		#div2{
			height:1000px;border:10px solid blue;
		}
		.middle{
			
		}
	</style>
</head>
<body>
	<div id='content'>
		<div class="div" id='div1'></div>
		<div class="div" id='div2'>
			<div class='middle'></div>
		</div>
		<div class="div" id='div3'></div>
	</div>

</body>
</html>





2. 横向的左右中的中间的布局

<!DOCTYPE html>
<html lang="en"><head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="" />
	<title>ETUI2.2 </title>
	<style>
		#content{
			position:relative;
			width:100%;
			height:200px;
			border:1px solid red;
			
			display:flex;
			flex-wrap:wrap;
			justify-content:space-around;
			align-items:center;
		}
		span{
			width:30%;
			height:50px;
			border:1px solid black;
		}
	</style>
</head>
<body>
	<div id='content'>
		<span></span>
		<span></span>
	</div>

</body>
</html>