Question 1

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

Accepted Answer

justify-content distributes space along the main axis. align-items controls alignment on the cross axis. Both axes flip when flex-direction changes from row to column.

Question 2

How do I centre a div both horizontally and vertically with flexbox?

Accepted Answer

Apply display: flex; justify-content: center; align-items: center; to the parent container. Add min-height: 100vh for full-page centring.

Question 3

When should I use flexbox vs CSS Grid?

Accepted Answer

Use flexbox for one-dimensional layouts (single row or column). Use Grid for two-dimensional layouts where both rows and columns need explicit control.

Question 4

What does flex: 1 mean?

Accepted Answer

flex: 1 is shorthand for flex-grow: 1; flex-shrink: 1; flex-basis: 0%. The item grows to fill available space equally with other flex: 1 siblings.

Question 5

What does flex-wrap do and when should I use it?

Accepted Answer

flex-wrap: wrap allows items to flow onto new lines when space runs out. Essential for responsive card grids that reflow from multi-column to single-column without media queries.

Question 6

What is the difference between gap, margin, and padding in flexbox?

Accepted Answer

gap adds space between flex items only, not on outer edges. padding adds inner spacing inside the container. Use gap for item spacing and padding for container breathing room.

Question 7

How do I make one item take up all remaining space?

Accepted Answer

Apply flex: 1 or flex-grow: 1 to that item. It expands to fill all available space not claimed by other items.

Question 8

How do I reverse the order of flex items without changing the HTML?

Accepted Answer

Use flex-direction: row-reverse or column-reverse to reverse all items. Use the order property on individual items for finer control.

Gerador CSS Flexbox

Propriedades do Contêiner

Perguntas Frequentes