如何修复flex布局中面板缩小后按钮自动换行错位的问题

问题原因 #

• 外层.outer容器设置了flex-wrap: wrap属性，允许子元素自动换行，当容器宽度小于290px时，一行无法放下3个宽度为90px的按钮，就会触发换行错位
• .outer.isOpen状态下宽度设置为auto，没有最小宽度限制，当页面宽度缩小时，容器会被挤压变窄，进一步加剧换行问题

修复方案 #

方案1：固定容器最小宽度（保持按钮原有大小不变） #

仅需要修改两处CSS代码即可：

1. 给默认状态的.outer添加最小宽度限制

.outer {
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  justify-content: space-between;
  align-content: space-between;
  width: 290px;
  min-width: 290px; /* 新增代码 */
  height: 290px;
  background: green;
  animation: fadeInButtons 3s ease 0s forwards;
}

2. 给展开状态的.outer.isOpen也添加最小宽度限制

.outer.isOpen {
  width: auto;
  min-width: 290px; /* 新增代码 */
}

效果说明：按钮永远保持90px的原始大小，页面宽度不足时会出现横向滚动条，不会出现换行错位

方案2：按钮自适应缩放（适配窄屏幕无滚动条） #

如果希望页面缩小时按钮同步缩小、不出现滚动条也不换行，可以修改以下CSS：

.outer {
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  justify-content: space-between;
  align-content: space-between;
  width: 100%;
  max-width: 290px; /* 最大宽度保持原有尺寸 */
  aspect-ratio: 1/1; /* 保持容器为正方形 */
  height: auto;
  background: green;
  animation: fadeInButtons 3s ease 0s forwards;
}

.thePlay {
  flex: 0 1 30%; /* 允许按钮收缩，基础宽度占容器的30% */
  max-width: 90px; /* 最大宽度不超过原始尺寸 */
  aspect-ratio: 1/1; /* 保持按钮为圆形 */
  height: auto;
  border-radius: 50%;
  cursor: pointer;
  border: none;
  fill: blue;
  background: transparent;
  padding: 0;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
}

效果说明：页面宽度大于290px时按钮保持90px大小，页面宽度小于290px时按钮同步等比例缩小，永远保持33的网格布局，不会换行也不会出现横向滚动条*

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