Flex容器动态布局：少时居中，超出时滚动且无偏移

要实现「内容少时光栅居中，内容过多时横向滚动且项目左对齐不偏移」的效果，只需要调整滚动容器的宽度逻辑和对齐方式，修改后的代码如下：

修改后的CSS #

#sub_cat_flex_cntr {
    display: flex;
    justify-content: center;
    width: 100%; /* 让父容器占满可用宽度 */
}

#sub_cat_cntr {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start; /* 内容过多时保持左对齐 */
    gap: 10px;
    /* 核心配置：内容少时宽度贴合内容，内容多时撑满父容器 */
    max-width: 100%;
    min-width: fit-content;
    overflow-x: auto;
    height: 150px;
}

/* 其余样式保持不变 */
#sub_cat_cntr p {
    font-size: 20px;
    padding-top: 15px;
}

.sub_cat {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #003269;
    border: 1px solid white;
    border-radius: 5px;
    height: 100px;
    width: 2in;
    flex-shrink: 0;
}

.sub_cat:hover {
    cursor: pointer;
}

.sub_cat p {
    text-align: center;
}

逻辑说明 #

• 父容器#sub_cat_flex_cntr通过justify-content: center，在内容较少时让滚动容器整体居中，间接实现项目居中的视觉效果。
• 滚动容器#sub_cat_cntr的max-width: 100%确保内容过多时不会超出父容器，min-width: fit-content保证内容少时容器宽度贴合项目总宽度。
• justify-content: flex-start确保内容溢出时项目保持左对齐，滚动过程中不会出现偏移问题。

效果验证 #

• 项目数量少：滚动容器宽度随内容自适应，父容器的居中属性让整个内容块在页面中间显示，视觉上就是项目居中。
• 项目数量多：滚动容器宽度撑满父容器，项目左对齐排列，超出部分可横向滚动，滚动时项目不会向左偏移。

内容的提问来源于stack exchange，提问作者ProfoundHypnotic