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

  • 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.

@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