求助：HTML/CSS网站实现响应式适配失败，flex-shrink无效如何解决

flex-shrink 未生效的根因 #

你当前的flex容器#content默认是flex-wrap: nowrap不换行状态，子项.item下的图片设置了固定160px宽度，加上每个子项左右各40px的固定margin，三个子项的总最小宽度超过小屏设备宽度时，图片的固定宽度限制了flex-shrink的压缩空间，自然无法生效。

具体响应式优化方案 #

• 调整flex容器属性：给#content添加flex-wrap: wrap支持小屏自动换行，将固定高度height: 50vh改为min-height: 50vh避免换行后内容溢出，用gap属性替代子项的margin控制间距，同时添加横向内边距避免小屏内容贴边
• 优化图片响应式规则：将img的行内固定宽度width:160px改为max-width: 160px; width: 100%，大屏保持160px宽度，小屏自动等比缩小
• 动态限制标题字号：将标题的font-size: 8vh改为font-size: clamp(2rem, 8vh, 5rem)，避免横屏时字号过大、小屏时字号过小
• 适配小屏的卡片动画偏移：添加媒体查询，屏幕宽度小于768px时将卡片伪元素的偏移量从15px改为8px，避免小屏动画偏移过多超出可视区域

优化后的核心样式代码 #

#content {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    flex-wrap: wrap;
    gap: 40px 30px;
    padding: 20px;
    box-sizing: border-box;
}

/* 移除原来.item的margin:0 40px规则，用gap控制间距即可 */
.item {
    position: relative;
}

.img {
    max-width: 160px;
    width: 100%;
    height: auto;
}

#title {
    text-align: center;
    color: #FFFFFF;
    text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #ff0000, 0 0 30px #ff0000, 0 0 40px #ff0000, 0 0 55px #ff0000, 0 0 75px;
    font-size: clamp(2rem, 8vh, 5rem);
    padding: 0 20px;
    box-sizing: border-box;
}

/* 小屏适配 */
@media (max-width: 768px) {
    .item::before {
        top: -8px;
        left: -8px;
    }
    .item::after {
        bottom: -8px;
        right: -8px;
    }
    .item:hover::before {
        top: 8px;
        left: 8px;
    }
    .item:hover::after {
        bottom: 8px;
        right: 8px;
    }
}

关于自定义动画的说明 #

你当前提供的代码中没有按钮元素，现有的卡片hover动画是直接写在页面内的样式，不属于CodePen预设，你可以直接修改.item::before、.item::after的属性来调整动画效果，完全可以自定义修改。

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