如何使用Flexbox实现容器内两元素分别定位左上角与右下角

布局参考图

当前图内元素采用绝对定位实现样式，调整屏幕尺寸时需要微调“For Sale”和“$400,000”两个元素的位置，想要确认是否可以用flexbox实现相同布局。
尝试实现的HTML结构如下：

<div class = 'container'>
  <p class='item1'>Top Left</p>
  <p class='item2'>Bottom Right</p>
</div>

初始尝试的CSS代码如下：

.container{
  display: flex;
  background: red;
  width: 500px;
  height: 200px;
  color: white;
}

.item1{
  align-self: flex-start;
}

.item2{
  align-self: flex-end;
  justify-self: flex-end;
}

实际测试中justify-self没有生效，查阅文档得知flex布局下该属性会被忽略，想了解该属性被忽略的原因，以及是否有flex实现该布局的方案，是否必须继续使用绝对定位。

为什么flex布局下justify-self无效 #

Flex布局的对齐逻辑分为主轴和交叉轴两个维度：交叉轴方向支持单个子项通过align-self单独设置对齐规则，但主轴方向的空间分配是面向所有子项全局计算的，整体按规则统一分配剩余空间，不支持单个子项脱离全局规则单独设置主轴对齐位置，这就是justify-self在flex场景下被忽略的核心原因。

flex实现左上角+右下角布局的方案 #

不需要依赖绝对定位，利用flex的margin: auto特性就可以轻松实现，适配不同屏幕尺寸时调整位置也更方便，修改后的CSS代码如下：

.container{
  display: flex;
  background: red;
  width: 500px;
  height: 200px;
  color: white;
  flex-wrap: wrap;
  padding: 12px;
  box-sizing: border-box;
}

.item1 {
  /* 左上角元素默认对齐左上位置，无需额外属性 */
}

.item2 {
  /* 自动吸收左侧剩余横向空间，将元素推到最右侧
     自动吸收上方剩余纵向空间，将元素推到最底部 */
  margin-left: auto;
  margin-top: auto;
}

实现原理：flex子项设置方向为auto的margin时，会自动占据该方向上的所有容器剩余空间。只要给右下角元素设置左、上方向的auto margin，就能自然把元素挤到容器的右下角位置。

如果需要微调两个元素的位置，只需要给对应元素添加对应方向的固定margin值、或者调整容器内边距即可，比绝对定位的响应式适配成本低很多。

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