如何使用inline-flex实现div/文本右对齐？

嘿，我完全懂你的困惑——inline-flex的对齐逻辑确实容易和常规flex搞混，我来给你几个靠谱的方案：

方案1：父元素设置text-align: right #

因为display: inline-flex的元素本质是行内级元素，和普通的inline-block、inline元素一样，会受父元素的text-align属性控制。你只需要给这些链接的父容器加上：

.parent-container {
  text-align: right;
}

这样所有inline-flex的链接就会自动右对齐，而且不会改变链接本身的宽度（依然是内容自适应），完美符合你的需求。

方案2：给inline-flex容器加margin-left: auto #

如果不想修改父元素样式，或者只需要单个/一组链接右对齐（其他内容左对齐），可以直接给你的inline-flex链接容器设置：

.animated-link {
  display: inline-flex;
  margin-left: auto;
}

margin-left: auto会让容器自动占据父元素剩余的左侧空间，从而把自己推到右侧，同样不会让链接撑满宽度。

为什么之前的方法没生效？ #

• justify-content: flex-end无效：这个属性是用来对齐flex容器内部的子元素，但inline-flex容器的宽度是由内容决定的（刚好包裹链接），没有多余空间让子元素移动，所以看起来没效果。
• display: flex撑满宽度：因为flex容器默认是块级元素，宽度会自动撑满父容器，如果你想用flex但不想撑满，可以给它加width: fit-content，不过这不如前两个方案简洁。

你可以根据自己的布局场景选其中一个，亲测都能解决你的问题～

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