Overview

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.

Layout Attribute

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.
First item in row
Second item in row
First item in column
Second item in column

See the layout options page for information on responsive layouts and other options.