如何将按钮置于flex容器底部？justify-self-end不生效

在垂直flex布局（flex-col）中，justify-self-end无法生效，self-end仅能让按钮沿水平方向靠右，若要将按钮推至容器底部，可通过以下方式解决：

解决方案：使用mt-auto类 #

在按钮的className中添加mt-auto，利用flex布局的自动margin特性，将按钮推至容器底部：

<div className="group flex flex-col gap-4 rounded-2xl bg-brand-white p-4 shadow-card">
    <div className="relative overflow-hidden rounded-2xl">
      { ...JSX }
    </div>

    <p className="text-brand-black/80">{shortDescription}</p>
    <Button
      as={Link}
      href={link}
      variant="sm-inverted"
      className="w-fit mt-auto"
    >
      Learn More
    </Button>
  </div>

如果需要按钮同时靠底且靠右，可结合self-end类：

<Button
  as={Link}
  href={link}
  variant="sm-inverted"
  className="w-fit mt-auto self-end"
>
  Learn More
</Button>

原理说明 #

• justify-self是Grid布局的专属属性，在Flex布局中不生效，因此无法通过它实现垂直方向的靠底对齐。
• self-end控制的是Flex交叉轴（水平方向）的对齐逻辑，只会改变按钮的水平位置，无法调整垂直位置。
• mt-auto会自动填充按钮上方的剩余空间，在垂直Flex布局中，这一特性会将按钮挤压到容器底部。

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