In Flexbox, how can you tell whether a CSS property belongs on the flex container or on a flex item, and what happens if you declare it on the wrong one?

## The rule behind the two lists Flexbox properties divide into two groups, and the division is not arbitrary. A flex container owns the **layout**: which axis items run along, whether they wrap onto more lines, how the group as a whole is distributed and spaced. A flex item owns **its own participation** in that layout: how much of the free space it takes, what size it starts negotiating from, where it sits across the axis, where it falls in the visual sequence. So before writing a declaration, ask: *is this a statement about all of them, or about this one?* | Declared on the container | Declared on the item | | --- | --- | | `display: flex` / `inline-flex` | `flex-grow` | | `flex-direction` | `flex-shrink` | | `flex-wrap` | `flex-basis` | | `flex-flow` (the two combined) | `flex` (the three combined) | | `justify-content` | `align-self` | | `align-items` | `order` | | `align-content` | | | `gap`, `row-gap`, `column-gap` | | One pairing is worth memorising because it catches people out: `align-items` is the container's default for all items, and `align-self` is the per-item override of that default. Same axis, two different owners. There is deliberately no `justify-self` in Flexbox, because main-axis position is a property of how the whole line is distributed, not of one box. ## What happens when you get it wrong Nothing — and that is exactly what makes it hard to debug. CSS does not raise errors. A declaration that does not apply to the box it is written on is simply ignored: `justify-content` on an item does not move that item, and `flex-grow` on the container does nothing unless that container is itself a flex item of something else. The stylesheet still parses, the rule still shows up in devtools, and the page just looks wrong. Modern browser devtools help here: they flag declarations that have no effect on the selected element, usually by dimming or striking through the property with a note explaining why. When a flex declaration seems to be ignored, checking whether the panel considers it active is faster than adding `!important`. ```css /* container: statements about the whole layout */ .toolbar { display: flex; flex-direction: row; justify-content: space-between; } /* item: statements about this one box */ .toolbar .search { flex-grow: 1; align-self: stretch; } ``` ## The case that looks like an exception A flex item can itself be a flex container. When it is, container properties on it are entirely legitimate — they just apply one level down. So `justify-content` written on `.card` does nothing to where `.card` sits inside `.row`, but if `.card` is `display: flex` it governs `.card`'s own children. People who have seen this working conclude that `justify-content` "sometimes works on items", which is the wrong lesson: the property never describes the box it is written on, always the box's children. ## Properties on neither list that still matter Several ordinary properties on an item feed the flex algorithm without being flex properties: - `width`, `height`, `min-*` and `max-*` on an item are inputs to sizing. Which of them counts as the main size depends on `flex-direction`, and min/max constraints clamp the result after growing and shrinking have been computed. - `margin: auto` on an item absorbs free space along whichever axis it is set on, before main-axis distribution runs. It is an item-level tool that is not part of the `flex` shorthand at all. - `position: relative` on an item behaves normally; the item is still a flex item and is then offset from its flex-computed position. A useful sanity check for the whole model: the *container* never knows anything about individual items beyond the defaults it hands them, and an *item* never knows anything about its siblings beyond the free space left over. Every flexbox property fits into one of those two sentences. ## Getting the vocabulary right in an interview Interviewers use this question as a quick probe for whether you have actually built with Flexbox or only read about it. Say the rule first — layout-wide versus per-box — then give a few examples on each side and the `align-items`/`align-self` pairing. Finish with the silent-failure point, because it is the practical part: nothing errors, so you diagnose by asking which box the declaration is on, not by escalating specificity.