Flexible Sizes and Wrapping

Flexible Sizes and Wrapping: Flexbox Sizing: flex-grow, flex-shrink and flex-basis, Flexbox Wrapping and gap.

Updated November 10, 2026

1. Flexbox Sizing: flex-grow, flex-shrink and flex-basis (Journeyman): Each flex item starts from its flex-basis, flex-grow shares out the leftover space like splitting a bill, flex-shrink decides who gives up room when it's tight, flex: 1 sets all three at once, and min-width: 0 lets a long line of text shrink.
2. Flexbox Wrapping and gap (Journeyman): flex-wrap lets flex items move onto a new line when they run out of room, gap puts even space between them, align-content places the lines, flex: 1 1 15rem makes a card row that fits any screen, and order changes what the eye sees but not what the keyboard follows.