如何实现屏幕较小时按钮换行？HTML、CSS响应式适配方案

核心修改方案 #

• 给flex容器添加换行属性，让空间不足时子元素自动换行
• 调整按钮宽度设置，避免固定宽度导致小屏幕溢出

修改后的完整CSS代码 #

.Container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap; /* 关键：允许子元素在空间不足时换行 */
}

.ModeButton {
  color: #ffffff;
  background: linear-gradient(90deg, #65F78C 0%, #54E051 35%, #96FC5B 100%);
  border: 0px;
  font-size: 30px;
  border-radius: 15px;
  font-family: 'M PLUS 1p', sans-serif;
  width: 100%; /* 自适应容器宽度 */
  max-width: 500px; /* 保留大屏幕下的最大宽度限制 */
  height: 350px;
  opacity: 1;
  transition: color, opacity 0.3s linear 0s;
}

关键说明 #

• flex-wrap: wrap：默认flex容器的flex-wrap属性是nowrap，会强制所有子元素挤在一行，添加这个属性后，当容器宽度放不下两个按钮时，第二个按钮会自动换行到下一行
• 按钮宽度调整：把固定的width: 500px改成width: 100% + max-width: 500px，既保证大屏幕上按钮不会过宽，又能在小屏幕上自适应容器宽度，避免因固定宽度溢出导致无法换行

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