html - CSS flex 元素的主轴对齐

Question

我是 CSS 的新手，我也在努力按照我想要的方式定位 flex 元素 (DownloadButton)。

我想以某种方式定位 flex 元素，但我的谷歌搜索技术让我失望了。

当前状态是这样的:

图标 DownloadButton DeleteButton

我想要的是:

图标 DownloadButton DeleteButton

我以为我可以使用align-items，但那是针对交叉轴的。我希望我的 DownloadButton 在最后紧贴 DeleteButton，而不是均匀间距，就像正常的 flex 行为一样。但是，我的谷歌搜索技能让我失望了。非常感谢您的帮助，谢谢大家!

Answer 1

我会将元素对齐到末尾(根据偏好)，然后调整第一个。

正如评论中指出的那样，结束对齐不是必需的，因为效果是由边距调整引起的。

.parent {
  width: 80%;
  margin: 1em auto;
  border: 1px solid grey;
  display: flex;
  justify-content: flex-end;
  padding: .5em;
}
button:first-child {
  margin-right: auto;
}

<div class="parent">
  <button>Icon</button>
  <button>Download</button>
  <button>Delete</button>
</div>