Flexbox

Breakpoints

768px

1000px

1200px

Material angular styles responsive

Layout

Example 1

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.

To make your layout change depending upon the device screen size, there are other layout attributes available:

layout Sets the default layout on all devices.

layout-smSets the layout on devices less than 768px wide (phones).

layout-gt-sm Sets the layout on devices greater than 768px wide (bigger than phones).

layout-md Sets the layout on devices between 768px and 1000px wide (tablets in portrait).

layout-gt-md Sets the layout on devices greater than 1000px wide (bigger than tablets in portrait).

layout-lg Sets the layout on devices between 1000 and 1200px wide (tablets in landscape).

layout-gt-lg Sets the layout on devices greater than 1200px wide (computers and large screens).

layout-margin adds margin around each flex child. It also adds a margin to the layout container itself.
layout-padding adds padding inside each flex child. It also adds padding to the layout container itself.
layout-fill forces the layout element to fill its parent container.

Parent layout and this element have margins.

Parent layout and this element have padding.

Parent layout is set to fill available space.

I am using all three at once.

Grid system

Добавьте flex атрибут к дочернему эдементу layout и поучите растягивающуюся область

Пример 1

[flex]

Пример 2

[flex="33"]

[flex="55"]

[flex]

Flex and offset attributes.

flex Sets flex.

flex-sm Sets flex on devices less than 768px wide.

flex-gt-sm Sets flex on devices greater than 768px wide.

flex-md Sets flex on devices between 768px and 1000px wide.

flex-gt-md Sets flex on devices greater than 1000px wide.

flex-lg Sets flex on devices between 1000px and 1200px.

flex-gt-lg Sets flex on devices greater than 1200px wide.

Hide and Show Attributes

hide display: none

hide-sm display: none on devices less than 768px wide.

hide-gt-sm display: none on devices greater than 768px wide.

hide-md display: none on devices between 768px and 1000px wide.

hide-gt-md display: none on devices greater than 1000px wide.

hide-lg display: none on devices between 1000px and 1200px.

hide-gt-lg display: none on devices greater than 1200px wide.

show Negates hide.

show-sm Negates hide on devices less than 768px wide.

show-gt-sm Negates hide on devices greater than 768px wide.

show-md Negates hide on devices between 768px and 1000px wide.

show-gt-md Negates hide on devices greater than 1000px wide.

show-lg Negates hide on devices between 1000px and 1200px.

show-gt-lg Negates hide on devices greater than 1200px wide.

Hide and Show Variables

$mdMedia is used to evaluate whether a given media query is true or false given the current device's screen / window size. The media query will be re-evaluated on resize, allowing you to register a watch.

$mdMedia also has pre-programmed support for media queries that match the layout breakpoints. (sm, gt-sm, md, gt-md, lg, gt-lg).

$mdMedia('sm') Negates hide on devices less than 768px wide.

$mdMedia('gt-sm') Negates hide on devices greater than 768px wide.

$mdMedia('md') Negates hide on devices between 768px and 1000px wide.

$mdMedia('gt-md') Negates hide on devices greater than 1000px wide.

$mdMedia('lg') Negates hide on devices between 1000px and 1200px.

$mdMedia('gt-lg') Negates hide on devices greater than 1200px wide.