将一个容器的一个元素在左上角的一个元素对齐，另一个使用Flexbox在右下角？

Question

图像中的元素是使用绝对定位样式的，但是当我调整屏幕大小时，我必须稍微调整“待售”元素和'$ 400,000'元素的定位，因此我很好奇是否有一种使用FlexBox实现相同布局的方法？

是我的尝试（ https://codepen.io/ob98/pen/pen/pen/pen/pen/eyvpjlj ）

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

这 ：

.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; /* If align-self moved this to the bottom  of the container vertically, I am thinking that this should move it to the end/right side of the container horizontally, but that is not working  */
}

刚刚去了 https：// https://developer.mozilla.org/ en-us/doc/web/css/jusify-self ，并看到“在flexbox布局中，此属性被忽略（更多关于flexbox中的对齐）”，所以我想这解释了为什么这是不起作用的，但是我真的不明白为什么要忽略此属性...无论如何，是否有一种方法可以使用Flexbox实现此布局，还是我必须坚持绝对定位？感谢您的任何输入。

Answer 1

添加到.container声明jusify-content：space-beten之间，使您的p都转到容器边缘，这已经完成了！

.container {
  display: flex;
  justify-content: space-between;
  background: red;
  width: 500px;
  height: 200px;
  color: white;
}

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

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

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

Answer 2

在容器中添加正当内容，并仅使用类似的Item2类将有所帮助。

.container{
  display: flex;
  justify-content: space-between;
  background: red;
  width: 500px;
  height: 200px;
  color: white;
}

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

Answer 3

可以是答案，但我不确定。当我跑步时，它起作用了。

.bg-flex {
  width: 100vw;
  height: 100vh;
  background-image: url('https://media.istockphoto.com/photos/the-city-of-london-skyline-at-night-united-kingdom-picture-id1312550959');
  display: flex;
  flex-direction: column;
}

.for-sale {
  height: 50%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}

.k-400 {
  height: 50%;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-end;
}

.example {
  width: 300px;
  height: 100px;
  background-color: aqua;
}

<div class="bg-flex">
  <div class="for-sale">
    <div class="example">

    </div>

  </div>
  <div class="k-400">
    <div class="example">

    </div>
  </div>
</div>