Question 1

What is CSS Flexbox?

Accepted Answer

CSS Flexbox (Flexible Box Layout) is a one-dimensional layout model that makes it easy to arrange items in a row or column. It provides powerful alignment and space distribution capabilities, making it ideal for building responsive web layouts without floats or positioning hacks.

Question 2

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

Accepted Answer

justify-content aligns flex items along the main axis (horizontal for row, vertical for column), while align-items aligns items along the cross axis (perpendicular to the main axis). For a row layout: justify-content controls horizontal alignment and align-items controls vertical alignment.

Question 3

What does flex-grow do?

Accepted Answer

flex-grow defines how much a flex item grows relative to other items when there is extra space. A value of 0 means no growth, 1 means it takes equal share, and 2 means it takes twice the share of items with flex-grow: 1.

Question 4

When should I use flex-wrap?

Accepted Answer

Use flex-wrap: wrap when you have multiple flex items that might overflow the container. With nowrap (default), all items stay on one line and may shrink. With wrap, items move to the next line when they run out of space, creating a multi-row or multi-column layout.

Question 5

What is the difference between Flexbox and CSS Grid?

Accepted Answer

Flexbox is one-dimensional — it works in one direction (row or column). CSS Grid is two-dimensional — it works in both rows and columns simultaneously. Use Flexbox for navigation bars, button groups, and inline components. Use Grid for complex page layouts with defined rows and columns.

Flexbox Generator

Frequently Asked Questions

Comments & Feedback