justify-content and align-items — CSS Technical Interview Questions & Answers

Aligning flex/grid items along each axis.

justify-content and align-items

  • Aligning flex/grid items along each axis.
  • justify-content and align-items is a CSS property: it changes how a selected element looks or sits. You write it inside a rule: .card { justify: …; }
  • Change one value, refresh, say what moved: colour, space, size, or stacking. That is how you learn properties — not by memorising the spec.
  • Trap: putting it on the wrong selector (parent vs child). Trap: px only on a phone page — learn rem/%/flex too when it is layout.
  • Box model reminder: width/height, padding, border, margin are different. If justify-content and align-items is about space, draw the box.

Technical Interview Tip: justify-content and align-items: one rule on .card, then say what changed.

Code Examples for justify-content and align-items

justify-content and align-items — working example

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.item {
  flex: 1 1 200px; /* grow | shrink | basis */
}

justify-content and align-items — flexbox is one-dimensional: justify = main axis, align = cross axis; gap spaces items.

How to Explain justify-content and align-items to an Interviewer

What does justify-content and align-items do?

A CSS property that changes look/layout Write it in a rule and refresh