CSS 仅限 FLEXBOX - 顶部 2 个元素，底部 1 个元素。 （非结构化）

Question

我有这个HTML。

<div class='parent'>
  <div>I should be at top right</div>
  <div>I should be at top left</div>
  <div>I should be at bottom right</div>
</div>

我想达到这样的状态：

这是我当前CSS使用绝对定位

<style>
    .parent {
      position: relative;
      width: 100%;
      height: 90vh;
    }
    .parent :first-child {
      position: absolute;
      top: 0;
      right: 0;
    }
    .parent :nth-child(2) {
      position: absolute;
      top: 0;
      left: 0;
    }
    .parent :last-child {
      position: absolute;
      bottom: 0;
      right: 0;
    }
  </style>

然而，我被告知可以完全不使用绝对定位（并且只使用 flexbox）。

知道如何实现吗？谢谢。

Answer 1

只需使用flex-wrap: flex;并调整子元素的宽度。在您的情况下 flex-direction: row-reverse; 也很有帮助。由于缺少研究成果，没有进一步的解释。

.parent {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}

.parent > div {
  box-sizing: border-box;
  width: 50%;
}


/* for styling purpose only */
.parent > div {
  border: 1px solid red;
}

<div class='parent'>
  <div>I should be at top right</div>
  <div>I should be at top left</div>
  <div>I should be at bottom right</div>
</div>