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

【问题标题】：CSS FLEXBOX ONLY - 2 elements at top, 1 element at bottom. (not structured)仅限 CSS FLEXBOX - 顶部有 2 个元素，底部有 1 个元素。（非结构化）
【发布时间】：2021-12-01 16:33:30
【问题描述】：

我有这个 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）。

知道如何实现这一目标吗？谢谢。

【问题讨论】：

您好，您能展示一下您尝试过的内容以及您想要达到的效果吗？
嗨，欢迎来到 SO。请先拨打tour。然后阅读what kind of questions you can ask here 和what kind of questions you should not ask here。请注意，SO 不是论坛、教程/指南，也不是免费的“代码编写服务”。它适用于已经可以编码但需要社区帮助来解决特定编码问题的开发人员，例如调试帮助。预计您已经做了足够的研究工作，并且至少尝试过自己解决问题。

标签： html css web layout flexbox

【解决方案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>

【讨论】：