使用Flexbox实现响应式按钮布局时出现异常效果求解

• 非移动端布局换行问题：原有代码给.settings-item设置flex: 1，等价于flex: 1 1 0%，元素会自动填充可用空间，同时设置了max-width: 150px和column-gap: 20px。当父容器宽度落在「3个150px宽度+2个间隙宽度 ~ 4个150px宽度+3个间隙宽度」区间时，4个元素总宽度超过父容器宽度，flex-wrap: wrap会触发换行，就会出现3个元素在上、1个在下的异常布局。
• 移动端间距异常问题：媒体查询中设置flex: 1 50%时，没有把column-gap的宽度纳入计算。flex的flex-basis定义的是元素自身的基础宽度，column-gap是元素之外的额外间距，两个元素的宽度加间隙总宽度超过100%时，就会触发意外换行、间距错乱的问题。
• 缺少垂直间距控制：原有代码只定义了水平间隙column-gap，换行后两行之间没有统一的垂直间距控制，也会导致布局异常。

以下是修改后的核心CSS代码，其余原有代码可以保留：

/* 统一盒模型，避免边框、内边距干扰宽度计算 */
* {
  box-sizing: border-box;
}

.settings-list {
    display: flex;
    flex-wrap: wrap;
    margin: 1rem 0;
    padding-left: 0;
    column-gap: 20px;
    row-gap: 20px; /* 新增垂直间隙控制 */
    justify-content: center;
}

.settings-item {
  border: 1px solid #000;
  flex: 0 1 150px; /* 替换原有的flex:1，关闭自动放大，基础宽度设为150px */
  max-width: 150px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 500px)
{
    .settings-item {
        max-width: 100px;
        flex: 0 0 calc(50% - 10px); /* 替换原有的flex:1 50%，扣除一半水平间隙的宽度 */
    }
}

• flex属性的三个参数分别对应flex-grow（放大比例）、flex-shrink（缩小比例）、flex-basis（基础宽度）。非移动端将flex设为0 1 150px，代表元素不会主动放大填充剩余空间，只会在父容器宽度不足时等比缩小，基础宽度为150px，保证父容器宽度足够时4个元素始终在同一行，不会提前换行。
• 移动端使用calc(50% - 10px)计算flex-basis，是因为两个元素之间的水平间隙为20px，每个元素提前扣除10px的间隙空间，两个元素加起来的总宽度为(50% - 10px) + 20px + (50% -10px) = 100%，刚好填满一行，不会出现意外换行。
• 新增的row-gap用来统一控制换行后两行之间的垂直间距，避免垂直方向布局错乱。

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