Question 1

What is CSS Flexbox?

Accepted Answer

CSS Flexbox is a one-dimensional layout method for laying out items in rows or columns. Items flex to fill available space and shrink when there isn't enough. It excels at nav bars, card rows, centering and responsive component layouts.

Question 2

What is the difference between justify-content and align-items?

Accepted Answer

justify-content controls the main axis (horizontal for row, vertical for column). align-items controls the cross axis (perpendicular to main axis). Together they fully position items inside the flex container.

Question 3

How does flex-grow differ from flex-shrink?

Accepted Answer

flex-grow distributes extra free space proportionally to positive flex-grow values. flex-shrink distributes negative overflow proportionally. flex-basis sets the initial size before grow/shrink calculations.

Question 4

Does this Flexbox Playground send my CSS to a server?

Accepted Answer

No. Everything runs locally in your browser. Sliders, previews and CSS generation happen on your device — your layout stays private.

Per-item controls

Generated CSS