实时预览
点击任意色块选中子项 · 拖动容器右下角可改变高度
flexbox.css — 自动同步生成
💡 justify-content vs align-items
justify-content 控制「主轴」对齐，align-items 控制「交叉轴」对齐。把 direction 切成 column，两条轴立即互换，是理解 Flexbox 最好的实验。
💡 flex: grow shrink basis
试试给某个子项 grow 设为 1：它会吃掉所有剩余空间；basis 设为 120px 再开 wrap，就是经典的自适应卡片栅格。
💡 align-content 只在多行生效
开启 wrap 并压缩容器高度让子项换行后，align-content 才能看到效果——它管的是「行与行之间」如何分布。