Flexbox垂直和水平重新排列

Question

和flexbox专家，

我正拼命寻找一种优雅的解决方案（无需添加其他容器/包装器元素）来解决以下问题：

（简化的）HTML看起来像：

<div class="card">
  <div class="card__header">
    <span>(( Title ))</span>
  </div>
  <div class="card__visual">
    (( image ))
  </div>
  <div class="card__body">
    <p>(( some text ))</p>
  </div>
</div>

和相应的SCSS：

.card {
  display: flex;
  flex-direction: column;
  border: 1px solid black;
  &__header {
    background: yellow;
    border: 1px solid black;
  }
  &__visual {
    background: deepskyblue;
    border: 1px solid black;
    ...
  }
  &__body {
    background: red;
    border: 1px solid black;
  }
}

结果-符合预期-如下：

到目前为止，这就是它在手机上的外观。
问题是，如何对相同的HTML结构进行样式设置以获取以下输出：

有没有办法实现这一目标？到目前为止，我能找到的最接近的是：

.card {
  display: flex;
  flex-direction: column;
  &__header {
    align-self: flex-end;
    width: 50%;
    ...
  }
  &__visual {
    align-self: flex-start;
    width: 49%;
    ...
  }
  &__body {
    align-self: flex-end;
    width: 50%;
    ...
  }
}

但是我找不到消除标题和正文之间“间隙”的方法：

那么有人在这里用一种聪明的方法:)吗？输入内容受到热烈欢迎。

Answer 1

您将需要将两个div彼此右包裹一个div。 我认为您无需添加div就可以使用Flex做到这一点。