Angular Material's responsive CSS layout is built on flexbox.
The layout system is based upon element attributes rather than CSS classes.
Attributes provide an easy way to set a value (eg. layout="row"
) and
help us separate concerns: attributes define layout, and classes define styling.
Note: Due to performance problems related to attribute selectors in IE11, our attributes are converted to class selectors at runtime. You should continue to use layout attribute selectors in your code.
Use the layout
attribute on an element to arrange its children
horizontally in a row (layout="row"
) or vertically in a column (layout="column"
).
Row layout is the default if you specify the layout
attribute without a value.
row | Items arranged horizontally. max-height = 100% and max-width is the width of the items in the container. |
column | Items arranged vertically. max-width = 100% and max-height is the height of the items in the container. |
See the layout options page for information on responsive layouts and other options.