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 заставляет элементы макета заполнить их родительский контейнер.