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.
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.
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:
layout
sets the default layout on all devices.
layout-sm
sets the layout on device >=600px wide.
layout-md
sets the layout on devices >=960px wide.
layout-lg
sets the layout on devices >=1200px wide.