[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 33%; } // ... match with flex=66
[flex="35"] { flex: 1 1 35%; }
// ... continue increments of 5 to 65%
[flex="65"] { flex: 1 1 65%; }
[flex="66"] { flex: 1 1 66%; } // ... match with flex=33
[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; }