Flex shorthand
Daisho Komiyama edited this page Aug 14, 2023
·
2 revisions
flex shorthand syntax is just confusing. We probably should avoid it.
/* One value, unitless number: flex-grow, flex-basis is then equal to 0. */
flex: 2;
/* One value, width/height: flex-basis */
flex: 10em;
flex: 30%;
flex: min-content;
/* Two values: flex-grow | flex-basis */
flex: 1 30px;
/* Two values: flex-grow | flex-shrink */
flex: 2 2;
/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;