CSS

Lesson 03

Flex layout boundaries

Keep flex spacing and alignment local to the component that owns the layout.

Good Code

review-toolbar.css
.review-toolbar {
  /* The container owns spacing; the status item owns its alignment exception. */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
}

.review-toolbar__status {
  margin-right: auto;
}

Bad Code

review-toolbar.css
.review-toolbar {
  /* Child selectors make every toolbar item inherit layout rules implicitly. */
  display: flex;
}

.review-toolbar > * {
  margin-left: 12px;
}

.review-toolbar > :first-child {
  margin-left: 0;
}

Review Notes

What to review

Good Code

The good version makes spacing a property of the flex container and keeps the one alignment exception attached to the item that needs it.

Bad Code

The bad version renders a row, but it spreads layout behavior across global child selectors that become fragile when children reorder, wrap, or include nested components.

Takeaways

  • Prefer local flex gaps over selectors that push margins onto every child.