我们可以采用flexflex-wrap:wrap;属性,让内部的子元素自动换行。

flex布局实现自动换行


<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>全栈攻城狮网:http://www.quanzhangongchengshi.com/</title>
	<style>
		.father {
			height:400px;
			width:400px;
			border:1px solid black;
			display:flex;
			flex-wrap:wrap;
			align-content:flex-start; 
		}
		.son {
			height:25%;
			width:25%;
			box-sizing:border-box;
			border:1px solid red;
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="son"></div>
		<div class="son"></div>
		<div class="son"></div>
		<div class="son"></div>
		<div class="son"></div>
		<div class="son"></div>
		<div class="son"></div>
		<div class="son"></div>
		<div class="son"></div>
	</div>
</body>
</html>



点赞(0) 打赏

Comment list 共有 0 条评论

暂无评论
立即
投稿
发表
评论
返回
顶部
{__SCRIPT__}