The four flex container properties people actually fumble — direction, justify-content, align-items, wrap — on a live container. Pick values and watch the children re-flow; the CSS panel prints exactly the rules in force.
The children carry different flex-grow values so grow behavior is visible, and wrap + gap show how the two spacing systems stack.
Frequently asked questions
justify-content vs align-items — which is which?
Both follow the axes set by flex-direction. Justify runs along the main axis (row by default); align crosses it. Flip direction to column and they swap roles — try it here, that flip is the whole confusion.
Why gap and not margin on children?
gap spaces only between items — no leading/trailing edge, no :last-child hacks, and it wraps correctly. It is the modern answer for both flex and grid.
中文说明
大家真正容易犯晕的四个弹性容器属性——direction、justify-content、align-items、wrap——摆在真实容器上。选值即看子元素重排；CSS 面板打印的正是生效的规则。
子元素带不同的 flex-grow，让伸展行为可见；wrap 与 gap 一起展示两套间距系统如何叠加。
常见问题
justify-content 和 align-items 到底谁是谁？
两者都跟着 flex-direction 设的轴走。justify 沿主轴（默认横）；align 垂直于它。把 direction 换成 column 它们就互换角色——在这里切一下，困惑的全部来源就是这一下。
为什么用 gap 而不是给子元素加 margin？
gap 只在元素之间留空——首尾没有多余边、不用 :last-child 补丁、换行也正确。它是 flex 与 grid 通用的现代答案。