弹性布局子元素布局案例实战

小沐爱编程

于 2022-10-03 11:54:16 发布

阅读量133

点赞数 1

分类专栏： HTML5基础 CSS 文章标签： css css3 html

本文链接：https://blog.csdn.net/SDXYGZH/article/details/127150742

版权

HTML5基础同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

CSS

4 篇文章 0 订阅

订阅专栏

弹性布局子元素布局案例实战

要求：

在这里插入图片描述

实现代码

<body>
	<div class="main">
		<div class="box">
			<div class="box-centent"></div>
			<div class="box-centent"></div>
			<div class="box-centent"></div>
			<div class="box-centent"></div>
		</div>
		<div class="box">2</div>
		<div class="box">3</div>
		<div class="box">4</div>
	</div>
	<style>
		* {
			margin: 0;
			padding: 0;
			color: aliceblue;
		}

		.main {
			width: auto;
			height: 700px;
			background-color: black;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
		}

		.main .box {
			margin-top: 200px;
			width: 200px;
			height: 200px;
			border: 1px solid #ccc;
			text-align: center;
			line-height: 200px;
			background-color: #6096e6;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
		}

		.main .box-centent {
			width: 60px;
			height: 30px;
			background-color: red;
		}
	</style>
</body>