HuntExams Academy
HTML/CSSIntermediate#css#flexbox

What do flex-grow, flex-shrink, and flex-basis do?

flex-basis sets the initial size before space distribution. flex-grow defines how much of the extra free space an item takes relative to siblings. flex-shrink defines how much an item shrinks when space is insufficient. flex is shorthand: flex-grow flex-shrink flex-basis.

Example
.sidebar { flex: 0 0 250px; }  /* fixed width, no grow/shrink */
.main { flex: 1 1 auto; }      /* grows to fill remaining space */

Related Questions

1
HTML/CSSBeginner#css#flexbox

How do you center a div both horizontally and vertically?

Open
2
HTML/CSSIntermediate#css#layout-puzzle

How do you build a sticky footer that stays at the bottom even with little content?

Open
3
HTML/CSSBeginner#css#grid

Explain CSS Grid: grid-template-columns/rows and fr unit.

Open