Question

我试图弄清楚CSS-flex-containers的工作方式。目前，我有以下输出： Image

绿色的大块是flex容器中的项目，白色的图块是另一个flex容器中的flex容器中的项目。但我希望这些项目的排列方式如下：

以下是我的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位于容器声明中。它必须在子声明中。

封装的柔性容器包装

1 个答案: