Как сделать разрыв строки в угловом флекс-макете, чтобы компонент отображался в новой строке - PullRequest
Новая
       6

Как сделать разрыв строки в угловом флекс-макете, чтобы компонент отображался в новой строке

0 голосов
/ 08 декабря 2018

У меня есть такой макет: 

<div fxLayout="row" fxFill fxLayoutAlign="start start">
    <app-comp1 class="comp"></app-comp1>
    <app-comp2 class="comp"></app-comp2>
    <app-comp3 class="comp"></app-comp3>
</div>

Каждый компонент (comp1, comp2 и т. Д.) И т. Д. Представляет виджет.У меня установлен размер компонентов (comp1, comp2 и т. Д.) В CSS 

.comp {
  width: 700px;
  height: 500px;
}

Проблема в том, что если добавить больше виджетов (app-comp4 и т. Д.), Они все будут отображаться в одной строке, ноЯ хочу, чтобы виджет отображался в новой строке, если в текущей строке нет места.Количество виджетов является динамическим, а размер виджета контролируется css, а не fxFlex="xxx%", поэтому я не могу использовать fxFlex="xxx%".

Есть мысли, как это реализовать?

1 Ответ

0 голосов
/ 08 декабря 2018

Вы можете использовать fxLayout="row wrap"

Вот пример стекаблица, как это работает ... в основном, переносит содержимое в новую строку на основе ширины контейнера ... Сократите ширину предварительного просмотра в стекаблице и протестируйтекоробки будут перенесены в следующую строку.

Здесь приведена ссылка на дополнительную информацию в вики

https://github.com/angular/flex-layout/wiki/fxLayout-API#fxlayout--wrap

Stackblitz

https://stackblitz.com/edit/angular-material-flex-layout-seed-bvbudh?file=app%2Fquestionaire.component.ts

...