如何使用具有不同高度的 div 的 CSS Flexbox

Question

我有一个包含五个不同面板的页面，每个面板都有不同的高度，其中一些具有不同的宽度。我一直想使用 CSS Flexbox，因为这些面板在需要响应时会堆叠在一起。

我遇到的问题是，当我尝试使用 CSS Flexbox 时，它会将所有 div 设置为完全相同的高度，这并不是我真正想要的。

这是生成我的 HTML 的 Haml：

.property-information
  .general-information-panel
     enough content for a height of 60px;
  .government-information-panel 
     enough content for a height of 100px;
  .owner-information-panel 
     enough content for a height of 80px;

CSS：

.property-information{
  font-size: 15px;
  opacity: .75;
  display: inline-flex;
  justify-content: space-between;
}

.general-information-panel{
  background-color: #e7f5fe;
  width: 400px;
}
.government-information-panel{
  background-color: #e7f5fe;
  width: 500px;
}
.property-owner-information-panel{
  background-color: #e7f5fe;
  width: 400px;
}

是否可以使用具有不同高度的 div 或面板的 CSS Flexbox？

Answer 1

我开始了一个 sn-p 但我完全不确定你的期望。
一个模式将不胜感激。

在那之后，我可以尝试通过编辑这个 sn-p 来帮助你。

container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  border: 1px solid red;
  width: 300px;
}

row {
  width: 200px;
  height: 50px;
}

#a {
  background-color: #fad390;
}

#b {
  background-color: #f8c291;
  width: 100px;
  height: 100px;
}

#c {
  background-color: #6a89cc;
}

#d {
  background-color: #82ccdd;
  width: 300px;
  height: 300px;
}

#e {
  background-color: #b8e994;
}

<container>
  <row id="a"></row>
  <row id="b"></row>
  <row id="c"></row>
  <row id="d"></row>
  <row id="e"></row>
</container>