Flex shorthand

Sets grow, shrink and basis at once, like flex: 1.

What is the flex shorthand?

flex sets flex-grow, flex-shrink and flex-basis in one go. flex: 1 means "share the space equally".

.pricing-plan { flex: 1; }   /* three plans, equal widths */

Level: Journeyman · More CSS terms at this level

Updated September 27, 2026