Layout DIRECTIVE

layout directive on a container element is used to specify the layout direction for its children. 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.

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

Layout Directive

layout directive on a container element is used to specify the layout direction for its children. 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.