# 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](https://www.ask-codey.com/lessons/css-flexbox-sizing) (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](https://www.ask-codey.com/lessons/css-flexbox-wrapping) (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.

Source: https://www.ask-codey.com/courses/css-in-depth/topics/css-flexbox-sizes-and-wrapping