响应式媒体查询下class为icon-links的div内元素无法左对齐问题

问题根因 #

flex布局的align-items属性没有left这个合法取值，你写的对应规则会被浏览器直接忽略，导致768px以下断点下.icon-links切换为纵向flex布局时，水平方向左对齐规则没有生效。

修改代码 #

仅需要调整媒体查询内的align-items取值，替换为flex规范的合法值flex-start即可，额外可给按钮加宽度适配规则避免拉伸：

@media screen and (max-width: 768px){
    .icon-links{
        flex-direction: column;
        justify-content: flex-start;
        /* 原left替换为flex-start */
        align-items: flex-start;
    }
    .icon-wrappers{
        justify-content: flex-start;
        /* 原left替换为flex-start */
        align-items: flex-start;
        margin-top: 2rem;
    }
    .contact-link{
        margin: 0;
        /* 可选添加：保证按钮宽度自适应内容，不会被拉伸铺满容器 */
        width: fit-content;
    }
}

补充说明 #

当flex布局flex-direction设为column时，主轴为垂直方向，justify-content控制垂直方向的元素对齐，align-items控制水平方向的元素对齐，水平左对齐对应的标准取值就是flex-start。

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