原

flex实现一行尽可能的容纳更多子项，且每项的内容自适应宽度，自适应内部文字的宽度

6人阅读 2024/11/21 11:55 总访问：717411 评论：0 收藏：0 手机

分类: 前端

代码如下：
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Layout Example</title>
    <style>
        .training-program-wrap {
            display: flex;
            flex-wrap: wrap; /* 允许网格项换行 */
			row-gap: 10px; /* 设置行与行之间的间距为 10px */
            /* 设置网格项之间的间距 gap: 10px;  */
        }
		
		.tpc-item {
			background: #f4f4f5;
			border-radius: 2px;
			border: 1px solid #d3d4d6;
			font-size: 12px;
			color: #909399;
			height: 28px;
			line-height: 28px;
			text-align: center;
			margin-right: 10px;
			padding: 0 10px;
			cursor: pointer;
			/* 确保内边距和边框包含在宽度内 box-sizing: border-box;*/
            /* 防止内容换行 white-space: nowrap; */
		}

		.tpc-item-cur {
			background: #4eadfe;
			color: #ffffff;
		}
    </style>
</head>
<body>
    <div class="training-program-wrap">
        <div class="tpc-item">2024暑期储备管理培训</div>
        <div class="tpc-item">技术文化</div>
        <div class="tpc-item">2024暑期集团教员培训</div>
        <div class="tpc-item">人事服务中心</div>
        <div class="tpc-item">财务服务中心</div>
        <div class="tpc-item">健康文化</div>
        <div class="tpc-item">学术服务中心-教学要求</div>
        <div class="tpc-item">思维文化</div>
        <div class="tpc-item">前沿技术</div>
    </div>
</body>
</html>
```

欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739

👈{{preArticle.title}}

👉{{nextArticle.title}}

评价

TeachingNote

这一生多幸运赶上过你.

博主信息

排名

文章

粉丝

文章类别

.net 38篇

后端 8篇

ORM 16篇

前端 64篇

随笔 14篇

移动开发 6篇

数据库 7篇

英语 3篇

rabbitmq 1篇

.net core 7篇

unity 1篇

k8s 1篇

云服务 1篇

DDD 1篇

网络 1篇

flex实现一行尽可能的容纳更多子项，且每项的内容自适应宽度，自适应内部文字的宽度

{{titleitem}} {{titleitem}}

{{titleitem}} {{titleitem}}