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

Question

我正在尝试构建一个布局，其中我有一个父级 flexbox div，其中有 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 嵌套在其中。

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

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

.stars {
  grid-column: span 3;
}

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

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

Is there a way to get two flexbox items within a row to stack as a column?

css

layout

alignment

flexbox