Grid CanyonISSUE #14 of 27

flex items · align-self · order

FlexboVSThe Float Phantom

Flexbo saysalign-self overrides cross-axis alignment per item; order reshuffles items visually.

align-self lets one item break from the container's align-items. order changes the visual sequence without touching the HTML (default 0; lower comes first). Use order sparingly: it can desync visual and tab order, hurting accessibility.

Power-ups you unlock

align-self overrides align-items for one item
order reorders items visually (default 0)
Lower order values come first
order can desync visual vs tab order

The Float Phantom attacks — common mistakes

Heavy use of order breaking keyboard tab flow
Expecting order to move items in the DOM
align-self on the container instead of the item

Boss battleBottom-align one item with align-self, then move the last item first with order:-1.

Example code

<!doctype html><html><head><meta charset="utf-8">
<style>.f{display:flex;gap:10px;height:120px;align-items:flex-start}.f div{background:#b388ff;color:#06040d;padding:12px}.low{align-self:flex-end}.first{order:-1}</style></head><body style="background:#06040d;padding:20px"><div class="f"><div>a</div><div class="low">bottom</div><div class="first">moved first</div></div></body></html>

▶ Open the interactive comic issue

‹ Flex Items · Grow · Shrink · Basis Grid · The Two-Dimensional Layout ›