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

代码如下：

<!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>

css弹性盒子，flex布局

flex布局常见问题

flex好看的相册

一点flex布局的运用

css div水平居。文字垂直居中。flex的方式实现div的垂直与水平居中。布局模板

uni-app 基础view，flex布局使用

flex布局多行自适应间隔

css实现左边div固定宽度，右边div自适应撑满剩下的宽度。左边定宽，左边固定，右边自适应。flex 占剩下的宽度

flex 每行3个。flex一行显示3个。flex 每行显示4个自适应排列。flex每行固定几个布局。css 格子栏效果，css实现框框效果。模板。小屏下一行显示4个，大屏下一行显示5个

flex子元素靠右。flex让某个子元素靠右或靠左显示

flex实现等宽布局且间隔相等的小技巧。使用flex 布局让子元素宽度均分且左右间距相等。flex宽度自适应，均分宽度，而且有一样的间距

flex平分宽度。flex宽度自适应，均分宽度

vue布局模板，前端布局模板，flex布局应用

flex布局一行显示多个。flex布局固定显示n个，自适应布局

flex flex-gorw不等分的问题

flex实现一行显示n个数量的布局，不同屏幕宽度下显示不同的数量，自适应一行显示的个数