【ife】任务十：Flexbox 布局练习

最新推荐文章于 2024-06-30 11:44:57 发布

筱葭

最新推荐文章于 2024-06-30 11:44:57 发布

阅读量726

点赞数 2

文章标签：百度前端技术学院 ife HTML CSS Flexbox

本文链接：https://blog.csdn.net/zhouziyu2011/article/details/53811075

版权

<!DOCTYPE html>
<html>
<head>
	<title>任务十：Flexbox 布局练习</title>
	<style>
		body{
			padding:20px;
			margin:0;
		}
		#container{
			display:flex;
			justify-content:space-between;
			align-items:center;
		}
		.flexbox{
			width:150px;
			border:1px solid #f00;
		}
		#first{
			height:120px;
		}
		#second{
			height:100px;
		}
		#third{
			height:40px;
		}
		#fourth{
			height:200px;
			border-color:#0f0;
		}
		@media screen and (max-width:640px){
			#container{
				display:flex;
				flex-wrap:wrap;
				align-items:flex-start;
			}
			.flexbox{
				margin-bottom:20px;
			}
			#fourth{
				order:-1;
			}
		}
	</style>
</head>
<body>
<body>
	<div id="container">
		<div class="flexbox" id="first"></div>
		<div class="flexbox" id="second"></div>
		<div class="flexbox" id="third"></div>
		<div class="flexbox" id="fourth"></div>
	</div>
</body>
</div>
</body>
</html>