无需媒体查询实现Flexbox换行后子元素自动占满可用宽度

该需求可以实现，仅需调整部分flex相关CSS属性即可满足所有要求，无需使用媒体查询。

现有代码问题梳理 #

• flex子项为li元素，但min-width限制写在了内部的a标签上，未对flex子项生效
• 父容器ul重复声明了justify-content属性，space-between和center冲突，多余属性需要清理
• a标签未设置宽度为100%，无法占满父级li的宽度
• 现有hover样式的类名与实际元素类名不匹配，hover效果无法生效

具体修改方案 #

CSS部分调整

/* 父容器调整 */
.connections>ul {
    height: 100%;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0; /* 清除ul默认自带的内边距 */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

/* flex子项li调整 */
.connections>ul>li {
    height: 50px;
    flex-grow: 1;
    flex-basis: 0; /* 配合flex-grow实现同列宽度均分 */
    min-width: 100px; /* 子项最小宽度限制直接加在flex子项上 */
    box-sizing: border-box;
}

/* 按钮样式调整 */
.connection-button {
    width: 100%; /* 占满整个li的宽度 */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    position: relative;
    color: #fff; /* 可选：深色背景下优化文字可读性 */
    text-decoration: none; /* 可选：清除a标签默认下划线 */
}

.discord-button {
    background-color: #5865F2;
}

.spotify-button {
    background-color: #1DB954;
}

.xbox-button {
    background-color: #107C10;
}

.steam-button {
    background-color: #1b2838;
}

.github-button {
    background-color: #14232c;
}

.gmail-button {
    background-color: #EA4335;
}

/* 修正hover类名，和元素实际类名匹配 */
.discord-button:hover {
    background-color: rgba(88, 101, 242, 0.6);
}

.spotify-button:hover {
    background-color: rgba(30, 215, 96, 0.6);
}

.xbox-button:hover {
    background-color: rgba(16, 124, 16, 0.6);
}

.steam-button:hover {
    background-color: rgba(68, 96, 130, 0.6);
}

.github-button:hover {
    background-color: rgba(255, 255, 255, 0.6);
}

.gmail-button:hover {
    background-color: rgba(212, 70, 56, 0.6);
}

HTML部分无需调整，原有代码可直接复用

实现逻辑说明 #

• 每个li的flex-grow: 1 + flex-basis: 0 会让同一行内的所有子项均分父容器剩余空间，宽度完全相等
• min-width: 100px 强制li的最小宽度为100px，当父容器宽度不足以放下当前行所有子项（计算规则：子项数量*(100px + 间隙宽度)）时，flex容器会自动换行
• 换行后的行内子项同样遵循flex-grow规则，会自动拉伸占满当前行的全部可用宽度
• 内部a标签设置了position: relative，你提到的绝对定位矢量图可以正常基于a标签定位，不会受外层布局影响

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