使用flex与flex-basis布局时如何实现文字外围正圆形边框

要修复正圆形变形问题，只需要修改少量CSS即可，不会破坏原有flex布局逻辑：

最优方案（兼容现代浏览器，Chrome88+、Firefox89+、Safari15.4+均支持） #

修改点1：调整flex父容器属性，防止元素被拉伸 #

给.achievements-items新增align-items: center属性，关闭flex默认的等高拉伸逻辑：

.achievements-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    align-items: center; /* 新增属性 */
    gap: 20px;
    margin: 1rem 0;
}

修改点2：强制圆形元素宽高比1:1 #

修改.achievements-item的样式，新增宽高比控制、防挤压和内容居中属性：

.achievements-item {
    flex-basis: 20%;
    flex-shrink: 0; /* 新增，防止容器空间不足时元素被挤压变形 */
    aspect-ratio: 1 / 1; /* 新增，强制元素宽高比始终为1:1 */
    display: flex; /* 新增，用于内部内容居中 */
    justify-content: center; /* 新增，内容水平居中 */
    align-items: center; /* 新增，内容垂直居中 */
    border-radius: 50%;
    border: 1px solid #000;
    /* 移除原有display: inline-block、line-height属性即可 */
}

兼容旧浏览器方案 #

如果需要适配不支持aspect-ratio的旧浏览器，可以用padding百分比法实现等宽高（百分比padding默认基于元素宽度计算）：

样式修改： #

.achievements-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    align-items: flex-start; /* 新增，防止拉伸 */
    gap: 20px;
    margin: 1rem 0;
}

.achievements-item {
    flex-basis: 20%;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid #000;
    position: relative;
    height: 0; /* 高度设为0，由padding撑开 */
    padding-top: 20%; /* 和flex-basis值一致，保证高度等于宽度 */
}

/* 文字内容用span包裹后绝对定位居中 */
.achievements-item > span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

HTML调整： #

把每个li内部的文字用span标签包裹即可：

<li class="achievements-item"><span>achiev1</span></li>

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