Overview

Angular Md uses a responsive CSS layout based on flexbox, rather than using CSS floats. Traditionally, floats proved to be the best solution for CSS layouts, but with flexbox now available in a majority of browsers, we're moving onto a new era with improved layout capabilities and features.

The layout system uses element attributes, rather than CSS classes. By doing so we're able to simplify creating layouts and make it easier to quickly generate the structure required at various viewport sizes. The attribute system allows assigning values following standard HTML conventions, which makes it easier to read and understand compared to long strung together CSS classes. Additionally, the layout attributes help to separate custom app styles from the core structure, which further simplifies code.

Layout Attribute

Use the layout attribute on an element to arrange its children horizontally in a row (layout="horizontal"), or vertically in a column (layout="vertical"). The layout attribute's value describes what the "main axis" is for its children.

I'm left.
I'm right.
I'm above.
I'm below.

Responsive Layout

From the ground up the layout system is built around being responsive to viewport size. Out of the box it comes with useful and customizable breakpoints, which can be easily reused. The layout attribute used with "horizontal" or "vertical" values define arrangement on all device sizes. If you wish to define a layout depending upon the device size, there are other layout attributes available:

I'm above on tiny devices, and to the left on devices wider than 600px.
I'm below on tiny devices, and to the right on devices wider than 600px.