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

电脑版发表于：2024/11/21 11:55

代码如下：
```
<!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 */
			column-gap: 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>
```

TeachingNote

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

{{item.title}}