Flex Gap, Order, and Alignment

Gap creates regular spacing without assigning margins to individual items, while order and align-self offer item-level control.

gap sets the spacing between flex items and, for wrapped content, between flex lines. Unlike padding, gap is not added around the outside edges. order changes visual placement of flex items, but leaves source and keyboard navigation order untouched.

align-self overrides cross-axis alignment for one item. It can, for instance, align a single callout toward the end while other items are centered.

Gap belongs to the container layout; order and align-self apply to individual flex items.

Spacing remains consistent for each pair of items.

HTML

<div class="gap-demo"><span>Overview</span><span>Schedule</span><span>Contact</span></div>

CSS

.gap-demo { display: flex; flex-wrap: wrap; gap: 12px; padding: 12px; background: #f1f5f9; max-width: 340px; }
.gap-demo span { padding: 9px 12px; background: #dbeafe; border-radius: 7px; }

Rendered output

Observe: Every neighboring pair uses the same gap without external margins on the container.

Override alignment for a single item in a tall row.

HTML

<div class="align-self-demo"><div>Basic</div><div class="standout">Featured</div><div>Premium</div></div>

CSS

.align-self-demo { display: flex; align-items: flex-start; gap: 9px; min-height: 112px; max-width: 350px; background: #f1f5f9; padding: 10px; }
.align-self-demo div { padding: 10px; background: #dbeafe; border-radius: 7px; flex: 1; text-align: center; }
.align-self-demo .standout { align-self: flex-end; background: #ccfbf1; }

Rendered output

Observe: The featured item moves toward the bottom edge of the row while its siblings stay at the top.

Gap belongs to the container layout; order and align-self apply to individual flex items.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• Using order to visually swap focusable controls can create a confusing keyboard order.
• Gap does not create outer padding; use the container’s padding separately.

Try order:-1 on Featured. Compare what sighted users see with the unmodified document reading order.

Before changing the code, predict what will change. Then verify by checking the rendered result.

Use gap for rhythm, align-self for a deliberate exception, and order only with attention to source order.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.