In a flex container, how do align-items and align-self differ, and what alignment does an item get when neither is declared?

## Two properties, one axis Flex layout has two axes. Items flow along the **main axis**; the **cross axis** runs perpendicular to it. `justify-content` deals with the main axis; `align-items` and `align-self` deal with the cross axis. Everything below is about the cross axis only. ## Container default, item override `align-items` is a container property. It does not do the aligning itself so much as set the default that every child adopts. `align-self` is an item property that overrides that default for one child. The mechanism is explicit in the specification: `align-self`'s initial value is `auto`, and `auto` computes to the value of the parent's `align-items`. So an item always has an effective cross-axis alignment; the only question is whether it came from the container or from an override. ```css .toolbar { display: flex; align-items: center; } /* everyone centres */ .toolbar .logo { align-self: flex-start; } /* except the logo */ ``` ## The default is stretch `align-items` has an initial value of `normal`. In a flex container, `normal` behaves as `stretch`. Stretch means: if the item's cross size is `auto`, grow it so it fills the cross size of the flex line. This single default explains one of flexbox's most-liked behaviours. In a row-direction container, the cross axis is vertical, so every item stretches to the height of the tallest one and you get equal-height siblings without measuring anything. Stretch has conditions, and knowing them is what separates "it just works" from "why isn't it working": - The item's cross size must be `auto`. A declared `height` in a row container (or `width` in a column container) wins, and the item keeps that size. - The item must not have an `auto` margin on the cross axis. An `auto` cross margin absorbs the free space instead, and alignment on that item is ignored altogether. - `stretch` still respects `max-height`/`max-width` and the item's minimum size, so an item will not stretch past its own limits. ## The value list The values you will actually be asked about: - `stretch` — fill the line's cross size (the default, via `normal`). - `flex-start` / `flex-end` — pack to the cross-start or cross-end edge of the line. The axis-relative `start` / `end` and the item-relative `self-start` / `self-end` also work. - `center` — centre within the line. - `baseline` (and `last baseline`) — align the items' text baselines with each other rather than their box edges. Two items with different font sizes or different padding will have their first lines of text sitting on one shared line, which box-edge alignment cannot produce. It is the right choice for a label next to a large heading. ## The property that does not work here Grid has a `justify-self` for positioning a single item along the inline axis of its cell. A flex container has no such thing: `justify-self` is ignored on flex items, because main-axis positioning is a property of the whole line, not of one item. The way to move one flex item along the main axis is an `auto` margin, not `justify-self`. This is a favourite trap in interviews and in real code. ## Cross-axis space has to exist Alignment can only move an item inside space that is there. In a row-direction container whose height is `auto`, the container is exactly as tall as its tallest item, so `align-items: center` has nothing to centre within — the tallest item defines the line and the shorter ones already had room to move. Give the container a height (or let it stretch inside a taller parent) and the effect appears. Candidates who report that `align-items: center` "doesn't work" have usually hit exactly this. ## How to talk about it The clean formulation is: `align-items` is a bulk setting, `align-self` is the exception, and the default is stretch rather than start — which is why flexbox gives you equal heights for free but also why an image in a flex row sometimes distorts when you never asked it to. When you need one item to break ranks, `align-self` is the whole answer; you never need to restructure the markup for it.