Flex自动换行调整上下边距

最新推荐文章于 2023-12-21 10:26:17 发布

三分妄想

最新推荐文章于 2023-12-21 10:26:17 发布

阅读量1.2w

点赞数 8

分类专栏：前端文章标签：前端

本文链接：https://blog.youkuaiyun.com/NuoYan3327/article/details/100018795

版权

前端专栏收录该内容

20 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>	
			.a{
				/*开启换行时的特性*/
				/*
				 开启弹性模式开启换行时所有items会横向排列并且自适应父级容器
				 一旦超出范围就会自动根据指定换行顺序进行换行 默认换行顺序为从左到右
				*/
				width: 300px;
				height: 500px;
				border: 1px salmon solid;
				display: flex;
				/*开启自动换行*/
				flex-wrap: wrap;
				/*如果觉得自动换行时的行距太大可以设置最低模式*/
				/* align-content: flex-start; */
			}
			.a div{
				width: 100px;
				height: 100px;
				background-color: blue;
				margin: 5px 0px 0px 5px;
			}
			h1{
				color: red;
				display: flex;
				justify-content: center;
			}
		</style>
	</head>
	<body>
		<div class="a">
			<div><h1>1</h1></div>
			<div><h1>2</h1></div>
			<div><h1>3</h1></div>
			<div><h1>4</h1></div>
			<div><h1>5</h1></div>
			<div><h1>6</h1></div>
		</div>
	</body>
</html>