flex竖向布局，每列2个

鲨鱼虾啦啦

已于 2023-04-28 16:58:00 修改

阅读量1.2k

点赞数

分类专栏： CSS 文章标签： html css3 flex

于 2023-04-04 17:30:33 首次发布

本文链接：https://blog.csdn.net/u010763322/article/details/129958138

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta chatset="utf-8">
    <title>flex 布局</title>
</head>
<style>
	* { margin: 0; padding: 0;}
	ul {
        display: flex;
		flex-flow: column wrap;
		align-content: flex-start;
		height: 440px;
		background: teal;
    }
	li { 
		width: 200px;
		height: 200px;
		background: yellowgreen;
		list-style:none;
		margin: 10px;
		font-size: 100px;
		display: inline-flex;
		justify-content: center;
		align-items: center;
	}
</style>
<body>
	
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
	</ul>

</body>
</html>