Flex布局下如何将第二个div设置为右对齐？技术求助

首先，你遇到的这个问题挺常见的——text-align: right在这里确实不起作用，因为它是用来调整元素内部文本的对齐方式，没法控制flex子项在容器里的整体位置。下面给你两种简单有效的解决方案：

方法一：给容器添加justify-content: space-between #

这种方法会让两个子项分别贴住容器的左右两侧，中间自动填充空白，特别适合这种两个元素分置两边的场景：

<div style="display: flex; justify-content: space-between;">
  <div (click)="openPasswordRecovery()" style="color:gray"> Remember Me </div>
  <div style="color:gray"> Forgot Password? </div>
</div>

方法二：给第二个子项添加margin-left: auto #

如果你不想让两个元素完全贴边，或者后续容器里还要加其他元素，这种方法更灵活——margin-left: auto会让这个子项自动把左边的空白填满，从而被“推”到容器右侧：

<div style="display: flex;">
  <div (click)="openPasswordRecovery()" style="color:gray"> Remember Me </div>
  <div style="margin-left: auto; color:gray"> Forgot Password? </div>
</div>

简单说下原理：Flex布局的核心是通过容器的justify-content属性或者子项的margin:auto来控制子项在主轴（这里是水平方向）上的分布，而text-align只影响元素内部的文本或行内元素对齐，对flex子项自身的位置没有作用~

内容的提问来源于stack exchange，提问作者frustrated-dev