Skip to content

Instantly share code, notes, and snippets.

@ThomasBurleson
Last active April 26, 2017 09:59
Show Gist options
  • Save ThomasBurleson/88152ec57c9133dec57a to your computer and use it in GitHub Desktop.
Save ThomasBurleson/88152ec57c9133dec57a to your computer and use it in GitHub Desktop.
Angular Material - FlexBox styles for Layout features
[flex] { 
  box-sizing: border-box;
 }

[flex]           { flex: 1;         } // == { flex: 1 1 0%; }
[flex="grow"]    { flex: 1 1 100%;  }
[flex="initial"] { flex: 0 1 auto;  }
[flex="auto"]    { flex: 1 1 auto;  }
[flex="none"]    { flex: 0 0 auto;  }

[flex="0"]       { flex: 1 1 0%;    } // !! Note the flex-grow and flex-shrink == 1
[flex="5"]       { flex: 1 1 5%;    }
[flex="10"]      { flex: 1 1 10%;   } 
// ... continue increments of 5 to 30%
[flex="30"]      { flex: 1 1 30%;   } 
[flex="33"]      { flex: 1 1 calc(100% / 3);   } 
[flex="35"]      { flex: 1 1 35%;   } 
// ... continue increments of 5 to 65%
[flex="65"]      { flex: 1 1 65%;   } 
[flex="66"]      { flex: 1 1 calc(200% / 3);   } 
[flex="70"]      { flex: 1 1 70%;   } 
// ... continue increments of 5 to 100%
[flex="100"]     { flex: 1 1 100%;  }
  • For layout="row" containers, we also do this:
{ max-width: %value;  max-height: 100%; }
  • For layout="column containers, we do this:
{ max-width: 100%;  max-height: %value; }

Resources

@ThomasBurleson
Copy link
Author

Due to community feedback - I changed the following values:

From

[flex="33"]      { flex: 0 0 33%;   } 
[flex="66"]      { flex: 0 0 66%;   } 

To

[flex="33"]      { flex: 0 0 calc(100% / 3);   } 
[flex="66"]      { flex: 0 0 calc(200% / 3);   } 

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment