Flex弹性布局实现四列网格

 	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			.container {
				display: flex;
				flex-wrap: wrap;
			}
			.box {
				list-style: none;
				flex: 0 0 25%;
				height: 50px;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<ul class="container">
			<li class="box"></li>
			<li class="box"></li>
			<li class="box"></li>
			<li class="box"></li>
			<li class="box"></li>
			<li class="box"></li>
			<li class="box"></li>
			<li class="box"></li>
			<li class="box"></li>
			<li class="box"></li>
		</ul>
	</body>

posted @ 2023-02-09 14:06 Felix_Openmind 阅读(869) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Flex弹性盒子

· [组件库]div设置四个角边框

· flex弹性布局及应用

· 弹性布局（ display: flex;）

· flex布局之一行显示4个，如果多于4个，自动换行

阅读排行：
· winform 绘制太阳，地球，月球运作规律
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具

历史上的今天：
2022-02-09 加载额外配置文件的方式

2025年3月

日

一

二

三

四

五

六

Felix_Openmind

https://github.com/serendipitywzz

Flex弹性布局实现四列网格

最新随笔

随笔分类 (404)

随笔档案 (410)

文章分类 (66)

文章档案 (99)

软件开发

阅读排行榜

	<head>
	<meta charset="utf-8">
	<title></title>
	<style>
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}
	.container {
	display: flex;
	flex-wrap: wrap;
	}
	.box {
	list-style: none;
	flex: 0 0 25%;
	height: 50px;
	border: 1px solid red;
	}
	</style>
	</head>
	<body>
	<ul class="container">
	<li class="box"></li>
	<li class="box"></li>
	<li class="box"></li>
	<li class="box"></li>
	<li class="box"></li>
	<li class="box"></li>
	<li class="box"></li>
	<li class="box"></li>
	<li class="box"></li>
	<li class="box"></li>
	</ul>
	</body>