Flex与Grid布局生成

可视化调节Flex与Grid容器及子项的全部常用属性，点击方块选中子项，实时输出CSS

预览

点击方块可单独设置该项的属性，再次点击取消选中。

容器属性

flex-direction

flex-wrap

justify-content（主轴）

align-items（交叉轴）

align-content（多行时）

gap：10px

选中项属性（未选中任何项）

点击预览区的方块以设置单项属性

flex: 1 是 flex-grow:1; flex-shrink:1; flex-basis:0% 的简写，与 flex-grow:1 单独使用效果不同（后者 basis 仍为 auto，内容宽度会影响分配）。
flex 项默认 min-width: auto，长文本或图片会撑破容器，需要时加 min-width: 0 或 overflow: hidden。
align-content 只在多行（wrap 生效且出现换行）时起作用。

CSS 代码

.container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: 10px; }

功能介绍

Flex与Grid布局生成用于把布局属性一次性看明白。Flex模式可调节容器的flex-direction、flex-wrap、justify-content、align-items、align-content与gap，点击预览区任意方块即可选中该子项，单独设置flex-grow、flex-shrink、flex-basis、align-self与order。Grid模式可设置grid-template-columns、grid-template-rows、grid-auto-flow、justify-items、align-items与行列间距，选中子项后可设置跨列跨行与justify-self、align-self。子项数量可随时增减，预览区即时反映每次改动。CSS输出使用nth-child选择器表示被单独设置过的子项，可直接复制。页面同时说明了几个高频困惑点：1fr的最小值默认是auto所以内容会撑开轨道（需要minmax写法才能真正等分）、auto-fill与auto-fit在有空轨道时的区别、以及flex简写与flex-grow并不等价（前者同时把flex-basis设为0）。

使用说明

1. 顶部切换Flex或Grid模式；2. 先调容器属性，观察预览区整体排列的变化；3. 点击预览区的方块选中子项，出现该子项的专属属性；4. 用加减按钮改变子项数量，验证换行与自动填充行为；5. 点击"复制CSS"取得容器与子项的完整代码；6. Grid想真正等分且不被长内容撑开，请用minmax(0, 1fr)而不是1fr；7. 需要"能放几列放几列且不留空轨道"用auto-fit，需要保留空轨道用auto-fill；8. flex简写与只写flex-grow的效果不同，注意区分。