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

• flex-grow​: dictates what amount of the available space inside the flex container the item should take up.
• flex-shrink: how much the flex item will shrink relative to the rest of the flex items in the flex container when there isn't enough space on the row (edited)

Warning

Contrary to convention our flex: <positive-number> is interpreted as shown above. Current Flexbox documentation has the following:

flex: <positive-number>

Equivalent to flex: <positive-number> 1 0px. It makes the flex item flexible and sets the flex basis to zero, resulting in an item that receives the specified proportion of the remaining space.

If all items in the flex container use this pattern, their sizes will be proportional to the specified flex factor.

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