有没有办法让一行中的两个 flexbox 项目堆叠为一列？

Question

我正在尝试构建一个布局，其中我有一个父 flexbox div，其中包含各个部分，我遇到的问题是试图让两个部分元素在整个布局时堆叠在一列中作为一行。

目前，有两个部分占据了行的整个高度，然后我有两个额外的部分，理想情况下应该只是它们较短内容的高度，并在单个列中相互堆叠::

我尝试堆叠的两个部分都具有这些 CSS 参数以尝试解决此问题::

flex-basis: 40%;
align-self: flex-start;

而父 div flex 有::

display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;

任何关于如何实现这一点的想法都将不胜感激，谢谢！

Answer 1

您将寻求比一级 flexbox 更复杂的布局。我想到了几个选项：

您可以给该行中的第三个单元格display: flex; flex-direction:column，然后将较小的 div 嵌套在其中。

或者，您可以使用网格代替 flex。然后您可以将其排列为三列，但可以根据需要将某些单元格设置为跨越多列或多行。例如：

.wrapper {
  display: grid;
  grid-template-columns: max-content 1fr 1fr;
}

.stars {
  grid-column: span 3;
}

.left, .middle {
  grid-row: span 2;
}