Угловая нестандартная раскладка FlexLayout

Question

Я пытаюсь создать компоновку, аналогичную той, которая сделана с помощью угловой схемы материала для приборной панели, но с использованием угловой гибкой компоновки.

Пример панели инструментов

Пока я дошел до:

<div fxFlex="66" fxFlexOffset="15" fxLayout="row" fxLayoutGap="0.5%">
      <div fxFlex="100%">
            <mat-card>
                  // content
            </mat-card>
      </div>
      <div fxFlex="50%">
            <mat-card>
                  // content
            </mat-card>
      </div>
      <div fxFlex="50%">
            <mat-card>
                  // content
            </mat-card>
      </div>
</div>

Что приводит к этому:

Он пытается понять это.

Answer 1

Вот ссылка stackblitz того, что вы пытаетесь сделать:

Вам просто нужно использовать wrap fxLayout="row wrap"

Дополнительное значение wrap указывает Flex Layout добавить flex-flow: row wrap в ваш гибкий контейнер.

В соответствии с CSS-трюком , flex-flow: row wrap сделать следующее волшебство:

Определяет, будут ли гибкие элементы помещены в одну строку или могут быть объединены в несколько строк. Если задано несколько линий, он также определяет поперечную ось, которая определяет направление, в котором новые линии укладываются.

PS: При использовании переноса с fxLayout для переноса строк или столбцов вы должны учитывать размеры зазоров при указании размеров дочерних элементов (используя fxFlex).

Answer 2

У вас есть две строки, поэтому вам нужно разделить их на две разные div (и вы можете удалить % из ваших атрибутов):

<div fxLayout="row" fxLayoutGap="15px">
  <div fxFlex="100">
    <mat-card>
      // content
    </mat-card>
  </div>
</div>
<div fxLayout="row" fxLayoutGap="15px">
  <div fxFlex="50">
    <mat-card>
      // content
    </mat-card>
  </div>
  <div fxFlex="50">
    <mat-card>
      // content
    </mat-card>
  </div>
</div>