如何让inline-flex布局中的「全部下载」按钮靠右对齐？

现有页面效果 #

现有布局代码 #

<div class="inline-flex flex-col justify-end gap-2 space-y-2 outline md:flex-row">

（注：代码里的inine-flex是拼写错误，需修正为inline-flex才能正常生效）

解决方法 #

方法1：通过父容器对齐属性控制（适配桌面端横排布局） #

给父容器追加md:justify-between类，在桌面端（md断点以上）的横排布局中，元素会自动左右分散对齐，「全部下载」按钮自然靠右；移动端竖排布局保持原有的justify-end让元素靠下对齐：

<div class="inline-flex flex-col justify-end gap-2 space-y-2 outline md:flex-row md:justify-between">

方法2：给按钮添加自动外边距（移动端/桌面端通用） #

直接给「全部下载」按钮的元素加上ml-auto类，利用flex布局中margin-left:auto会将元素推至容器最右侧的特性，无论横竖布局，按钮都会自动靠右：

<!-- 按钮元素示例 -->
<button class="ml-auto">全部下载</button>

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