Angular Material - Angular Material Layouts - Angular Material Tutorial
What is Layout in Angular Material?
- Layout directive on a container element is used for the specification of the layout direction for its children.
- The following are the assignable values:
- Row - Items are arranged horizontally with max-height = 100% and max-width is the width of the items in the container.
- Column - Items are arranged vertically with max-width = 100% and max-height is the height of the items in the container.
- For responsive design such as layout to be automatically changed depending upon the device screen size, following layout APIs can be used to set the layout direction for devices with view widths.
learn angular material tutorials - layout Example
Sr.No | API & Device width when breakpoint overrides default |
---|---|
1 | layout Sets default layout direction unless overridden by another breakpoint. |
2 | layout-xs width < 600px |
3 | layout-gt-xs width >= 600px |
4 | layout-sm 600px <= width < 960px |
5 | layout-gt-sm width >= 960px |
6 | layout-md 960px <= width < 1280px |
7 | layout-gt-md width >= 1280px |
8 | layout-lg 1280px <= width < 1920px |
9 | layout-gt-lg width >= 1920px |
10 | layout-xl width >= 1920px |
Example:
- The example shows the uses of the layout directive to showcase uses of layout.
Output
Related Tags - angular material , angular 2 material , angular material 2 , angular material design , material angular
Flex Directive:
- Flex directive on a container element is used to customize the size and position of elements.
- Flex directive defines the way how the element is to adjust its size with respect to its parent container and the other elements within the container.
- Following are the assignable values:
- multiples of 5 - 5, 10, 15 ... 100
- 33 - 33%
- 66 - 66%
Example:
- The example shows the use of flex directive to showcase uses of flex.