Angular Material Design – Change flex value with screen size

by

Check out the “Responsive Flex & Offset Attributes” section here: https://material.angularjs.org/#/layout/options

Basically, you can use these options:

  • flex – Sets flex on all.
  • flex-sm – Sets flex on devices less than 600px wide.
  • flex-gt-sm – Sets flex on devices greater than 600px wide.
  • flex-md – Sets flex on devices between 600px and 960px wide.
  • flex-gt-md – Sets flex on devices greater than 960px wide.
  • flex-lg – Sets flex on devices between 960px and 1200px.
  • flex-gt-lg – Sets flex on devices greater than 1200px wide.

So change your:

<div layout="column" flex="66">

to

<div layout="column" flex-gt-sm="66">

And that div will only use the 66 width when greater than small (mobile)

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)