css - 封装的 flex 容器包装

Question

我正在尝试了解 CSS-flex-containers 的工作原理。 目前我有以下输出: Image

绿色的大块是 flex-container 中的元素，白色方 block 是另一个 flex-container 中的 flex 容器的元素。但我希望这些元素的排列方式如下:

desired

以下是我的 CSS。任何人都可以帮助我吗？这也足够了，如果我的子元素(白色的)排成一行并包装到一个新行，如果一行中有很多元素。但它不起作用...

.container{
display: flex;
flex-direction: row;
flex-wrap: wrap;

. child { 背景颜色:#496339；

margin: 5px;
padding: 10px;
border-radius: 10px;
flex-grow: 1;

.childcontainer{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-around;
}

.childchild{
    max-width: 250px;
    background-color: lavender;
    border-radius: 10px;
    padding: 5px;
    margin: 5px;
}

添加了 HTML 结构:

  <div class="container">
  <div class="child" *ngFor="let project of arrObject?.projects;">
    <div class="projectheader">[P] {{project.name}}</div>
    <div class="childcontainer" *ngFor="let job of project.jobs">
      <div class="childchild">

        <div class="jobheader">[J] {{job.name}}</div>
        <div class="jobcontent">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</div>
      </div>

    </div>
  </div>
</div>

Answer 1

我自己发现了我的错误。

内部容器的 ngFor 在容器声明中。 它必须在子声明中。