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

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

我正在尝试构建一个布局，其中我有一个父 flexBox div，其中包含单独的部分，我遇到的问题是当整个布局处于作为一行。

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

我试图堆叠的两个部分都有这些 CSS 参数来解决这个问题::

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

父 div flex 有::

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

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

解决方法

您想要一个比一层 flexbox 所能做的更复杂的布局。我想到了几个选项：

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

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

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

.stars {
  grid-column: span 3;
}

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