如何在Flex布局的右侧元素之间增加间距？

你当前的布局已经成功将按钮对齐到容器右侧，但justify-content:flex-end仅负责控制整体的对齐方向，并不会自动给子元素之间添加间距。你可以通过以下几种简单方法实现需求：

方法1：使用Flex专属的gap属性（推荐） #

直接给容器添加gap属性，这是Flex布局专门用于设置子元素间距的属性，简洁通用，后续新增子元素时也能自动生效：

section {
  background: yellow;
  display: flex;
  justify-content: flex-end;
  gap: 1rem; /* 替换成你需要的间距大小 */
}

方法2：给单个按钮添加外边距 #

如果仅针对这两个元素，也可以直接给其中一个按钮设置外边距：
比如给左侧的Cancel按钮加右外边距：

section button:first-child {
  margin-right: 1rem;
}

或者给右侧的Confirm按钮加左外边距：

section button:last-child {
  margin-left: 1rem;
}

这几种方案都能快速实现你想要的效果，gap属性更适合未来可能扩展子元素的场景，单独设置margin则更灵活适配特定元素的间距需求。

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