flex-grow, shrink, basis
Definition
The three flex item properties that control size flexibility. They are usually combined into the shorthand `flex` property (e.g., `flex: 1 0 200px;`).
Explain Like I'm New
- **Basis**: The ideal starting width of the item (like `width`, but for flexbox). - **Grow**: If there is extra empty space in the container, how greedily should this item expand to eat that space? (0 = don't grow, 1 = take your fair share, 2 = take twice as much as others). - **Shrink**: If the screen gets too small, should this item shrink to prevent overflowing? (1 = yes, 0 = no, stay rigid).
Real World Example
A search bar. You want the 'Search' button to stay exactly 100px wide (`flex-basis: 100px; flex-shrink: 0;`), but you want the text input field to grow and fill the rest of the screen on any device (`flex-grow: 1;`).
Common Use Cases
- •Complex fluid layouts
- •Search bars
- •Sidebar & Main content layouts
Interactive Example
Interview Questions
basic
- If you write `flex: 1`, what does the `1` represent?
intermediate
- If Item A has `flex-grow: 1` and Item B has `flex-grow: 2`, what happens to the leftover space?