Flexbox: Aligning Layouts the Right Way

30‑second interview answer

Flexbox is a one-dimensional layout system (row or column). You set display: flex on a container, then align items along the main axis and cross axis using properties like justify-content and align-items. Flexbox shines for toolbars, navs, centering, and distributing space between items.

Flex mental model

• Flex container: the parent with display: flex
• Flex items: the direct children
• Main axis is controlled by flex-direction:
  • row → main axis is horizontal
  • column → main axis is vertical

The big 6 properties (memorize)

Container

1. flex-direction: row / column
2. justify-content: alignment along main axis
3. align-items: alignment along cross axis
4. gap: spacing between items
5. flex-wrap: allow wrapping

Item

6. flex: shorthand for grow/shrink/basis

Centering (classic interview)

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

flex: 1 explained

flex: 1 typically means:

• grow to fill remaining space
• shrink if needed
• base size is 0

Good for layouts like:

• sidebar + content
• navbar items

align-content vs align-items (trap)

• align-items: aligns items within a single line
• align-content: aligns lines when there is wrapping (flex-wrap: wrap)

If there’s no wrapping, align-content does nothing.

Common mistakes

1. Applying align-items to items (it belongs to container)
2. Confusing main vs cross axis
3. Forgetting that only direct children are flex items

Mini Q&A

Q1: Difference between justify-content and align-items?

• main axis vs cross axis.

Q2: When does align-content matter?

• when items wrap into multiple lines.

Q3: Flexbox vs Grid?

• Flexbox is 1D; Grid is 2D.

Summary checklist

• I can explain main/cross axis.
• I know justify-content vs align-items.
• I can center content quickly.
• I understand flex: 1 and wrapping.