CSS Flexbox & Grid FAQ

Q41 — What is Flexbox in CSS?

Flexbox is a 1D layout system for aligning items horizontally or vertically.

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

Q42 — Explain main-axis vs cross-axis in Flexbox.

▶ Main-axis → defined by flex-direction (row = horizontal, column = vertical).
▶ Cross-axis → perpendicular to main-axis.

Q43 — What are the main properties of Flexbox container?

• flex-direction (row, column)
• justify-content (main-axis alignment)
• align-items (cross-axis alignment)
• flex-wrap (wrap items)
• align-content (multiple line alignment)

Q44 — What are Flexbox item properties?

▶ flex-grow: how much item expands.
▶ flex-shrink: how much item shrinks.
▶ flex-basis: initial size before grow/shrink.
👉 shorthand: flex: grow shrink basis;

Q45 — Difference between Flexbox and CSS Grid?

➡ Flexbox → 1D layout (row OR column).
➡ Grid → 2D layout (rows AND columns).
➡ Flexbox = content-first. Grid = layout-first.

Q46 — What is CSS Grid? Give an example.

CSS Grid is a 2D layout system with rows & columns.

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-gap: 10px;
}

Q47 — What is difference between explicit grid and implicit grid?

▶ Explicit → defined with grid-template-rows/columns.
▶ Implicit → auto-created when extra items exist.

Q48 — What is grid auto-placement?

If items are not assigned to specific cells, grid auto-places them row by row or column by column.

Q49 — Difference between absolute positioning and fixed positioning in layouts?

➡ Absolute → relative to parent.
➡ Fixed → relative to viewport.

Q50 — Difference between CSS Multi-column layout vs Flexbox vs Grid?

▶ Multi-column (column-count) → like newspaper text.
▶ Flexbox → linear arrangement.
▶ Grid → full 2D control.

⬅ Home