Angular Material - Container
Модель адаптивного макетирования CSS в Angular Material построена на flexbox.
Система компоновки макета страницы основана на атрибутах, а не CSS-классах. Атрибуты позволяют легко и понятно установить значения (например: layout="row") и дополнительно придерживаться концепции разделения задач: атрибуты определяют макет, а классы определяют стиль.
See the Pen LVEyXj by Alex (@diproart) on CodePen.
Layout Attribute
Для выравнивания дочерних элементов по горизонтали используйте layout="row", по вертикали layout="column"
Изменение макета в зависимости от размера экрана устройства
Адаптивный макет
| layout | макет по-умолчанию для всех устройств |
| layout-sm | макет страницы для устройств шириной менее 600px ("большие" телефоны) |
| layout-gt-sm | макет страницы для устройств шириной более 600px (больше чем телефоны) |
| layout-md | макет страницы для устройств шириной между 600px и 960px (планшеты в портретной ориентации) |
| layout-gt-md | макет страницы для устройств шириной более 960px (больше чем планшеты в портретной ориентации) |
| layout-lg | макет страницы для устройств шириной между 960px и 1200px (планшеты в горизонтальной ориентации (landscape)) |
| layout-gt-lg | макет страницы для устройств шириной более 1200px (компьютеры и большие экраны) |
Поля, отступы и заполнение
layout-margin добавляет внешние отступы (поля) для всех flex дочерних элементов. И также добавляет внешние отступы к контейнеру макета.
layout-padding добавляет внутренние поля для все flex дочерних элементов.
layout-fill заставляет элементы макета заполнить их родительский контейнер.