One-dimensional layout with Flexbox

What you will build

Turn navigation and card actions into wrapping, well-aligned one-dimensional layouts.

Understand the idea first

Flexbox distributes items along one dimension.

Build it step by step

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}
.card-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.card-actions > :last-child {
  margin-inline-start: auto;
}

1. Identify the main axis before writing CSS.
2. Use flex and gap instead of scattered margins.
3. Enable wrapping and narrow the viewport.
4. Inspect the layout with the Flex overlay.

Read the important lines

• Flexbox distributes items along one dimension.
• Justify works on the main axis; align works on the cross axis.
• Auto inline margin pushes one item to the end.

Common mistakes and what to check

Practice without copying

Build a wrapping header with brand first and grouped links while preserving DOM focus order.

Completion check

• I produced the required visible result
• I can explain the input, processing, and output
• I tested normal, edge, and failure cases