Angular Material - FlexBox styles for Layout features

flexBox.md

[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

• https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties#flex
• https://css-tricks.com/almanac/properties/f/flex/
• https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items
• http://godban.com.ua/projects/flexgrid

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);   }