Flex布局中如何同时在按钮内部与按钮间分配剩余空间？

要实现每行剩余空间同时分配给按钮内部和按钮之间，只需调整flex布局的两个关键设置即可：

• 给容器添加justify-content: space-between，让每行剩余空白自动分配到按钮之间，保证间距均匀
• 给按钮设置带最小宽度的flex属性，让按钮能自动拉伸占满可用空间（内部分配剩余空间），同时避免窄容器下按钮被挤得过窄

具体代码调整如下：

容器样式 #

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem; /* 保留基础间距，防止按钮贴边 */
  justify-content: space-between; /* 核心：将剩余空间分配到按钮之间 */
}

按钮样式 #

.button {
  flex: 1 1 120px; /* 1=允许拉伸，1=允许收缩，120px=按钮最小宽度（可按需调整） */
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 4px;
  background: #4285F4;
  color: white;
  cursor: pointer;
}

效果说明 #

• 宽容器下：按钮会根据容器宽度自动拉伸（剩余空间分配到内部），同时justify-content会把每行多余的空白均匀分到按钮之间，布局整齐
• 窄容器下：当按钮宽度达到设置的最小宽度后，会自动换行；换行后的行同样会通过justify-content分配剩余空间，不会出现按钮挤成一团的情况

你可以根据实际需求调整按钮的最小宽度（比如改成150px）和gap值，适配不同的设计风格。

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