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 additionally helps us separate concerns: attributes define layout, and classes define styling.

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").

I'm left.

I'm right.

I'm above.

I'm below.

See Layout Options for information on responsive layouts and other options.