如何实现响应式内边距：让社交图标hover区域均等最大化

需求：让footer__socials容器内的每个footer__link社交链接，水平内边距响应式均等扩展，最大化hover区域，使hover时的背景区块均匀铺满对应位置。

修改后的CSS代码 #

.footer__socials {
    position: fixed;
    left: 0;
    margin-top: 10px;
    display: flex;
    align-items: center;
    width: 100vw;
    background: #2d2d2d;
}

.footer__link {
    cursor: pointer;
    color: #9f9f9f;
    font-size: 1.9em;
    padding: 10px 0; /* 保留上下内边距，优化垂直点击区域 */
    flex: 1; /* 关键：让每个链接平分容器可用宽度 */
    text-align: center; /* 确保图标在区块内居中 */
    transition: 0.15s;
}

.footer__link:hover {
    background: #333333;
}

优化说明 #

• 移除footer__socials中的justify-content: space-evenly，改用flex: 1让每个footer__link自动均等分配容器宽度，实现响应式的区块划分，无需手动用calc()计算内边距。
• text-align: center保证社交图标在各自的均等区块内居中，维持视觉整齐度。
• 上下内边距可根据需求调整数值，提升垂直方向的点击/hover体验，水平空间由flex:1自动填充，确保每个链接的hover区域最大化且均等。

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