Я пытаюсь понять, как работают CSS-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>