Mastery Points
0
Flexbox: Grow, Shrink, Basis in html-css
Context & Logic
The secret of Flexbox: 'flex-basis' is the item's starting size, 'flex-grow' handles expanding into available space, and 'flex-shrink' prevents overflow. These three define the true 'Flex' behavior.
Interactive Workshop
Interactive Playground
Source HTMLMarkup
Source CSSStyle
Live Output Pane
Sync activeTailwind Core Loaded
Standard CSS Scope
Auto-Sync Preview
Modify the source above to see live changes. Supports standard CSS and Tailwind utility classes.
Test Your Knowledge
Assessment Mode1What is the collective shorthand for grow, shrink, and basis?