使用Flex Wrap时，高度如何通过最小高度与第一行相同？

Question

目前，我使用 Flex 换行在移动到下一行时留出一个空格。但是，如果第一个高度变长，第一个柔性换行线的高度不会变长。

<div class="parent">
  <div class="unique-wrapper">
    <div class="unique_element">First</div>
  </div>
  <div class="child-wrapper">
    <div class="child">Second</div>
    <div class="child">Third</div>
    <div class="child">Fourth</div>
    <div class="child">Fifth</div>
  </div>
</div>

div {
  font-family: arial, sans-serif; 
  margin: 5px;
  color: white;
  border: 1px dotted black;
}

.parent { 
  display: flex;
  width: 300px;
}

.unique_element {
  background-color: Crimson;
  padding: 10px 10px 10px 10px;
}

.unique-wrapper, .child-wrapper {
  border: none;
  margin: 0;
}

.unique-wrapper {
  flex: 3;
}

.child-wrapper {
  flex: 7;
  display: flex;
  flex-wrap: wrap;
}

.child {
  width: auto;
  background-color: Cornflowerblue;
  padding: 10px 10px 10px 10px;
}

我的结果

增加高度时
随着第一个高度的增加，第二个和第三个的长度也必须增加，但在当前代码中，只有第一个更长。我搜索并发现有一种方法可以添加隐藏元素，但我无法使用 data.map 为特定元素提供类名。我该怎么办？

我想要的结果
我想知道需要做什么工作才能使它看起来像上图。

Answer 1

这是因为，你的

unique_element

是 flex 的一个子元素，而

child-wrapper

是另一个。因此，如果

unique_element

的高度增加，它会考虑与

child-wrapper

的关系。为了实现您的功能，您可以将其设为

3-column grid

，也可以将第一个 3 个元素放入一个子元素中，将其他 2 个元素放入下一个元素中。这取决于您的用例。