CSS Flexbox 与 Grid 演练场

CSS Flexbox 与 Grid 演练场 是什么？

CSS Flexbox 与 Grid 演练场是一款免费的可视化沙盒，用于学习和原型设计两种主流 CSS 布局模型，专为前端开发者、学生和设计师打造。选择 Flex 或 Grid，设置容器属性，并打开「设置」为单个子项设定样式：Flex 模式下有 order、flex-grow、flex-shrink、flex-basis 和 align-self，Grid 模式下有列/行跨度和 align-self。Grid 模式还提供自定义轨道尺寸——可输入任意 grid-template-columns/rows 值，如 200px 1fr 或 repeat(auto-fit, minmax(120px, 1fr))——以及可视化的 grid-template-areas 编辑器，为每个单元格命名（这也会创建命名网格线）。带编号方块的实时预览会反映每一处改动，你可以只导出 .container 规则，或连同逐项 CSS 一起复制到项目中。

如何使用 CSS Flexbox 与 Grid 演练场

1. 用模式开关选择 Flex 或 Grid，确定要构建的布局模型。
2. 设置容器属性——flex-direction/wrap 与 justify/align，或列数、行数及 justify-items/align-items。
3. 打开「设置」修改间距和项目数，并为每个子项设定样式（order、flex-grow/shrink/basis、align-self，或列/行跨度）。
4. 在 Grid 中将轨道尺寸切换为「自定义」，输入自己的 grid-template-columns/rows——px、fr、minmax() 或 repeat(auto-fit/auto-fill, …)。
5. 开启 grid-template-areas 编辑器，为每个单元格命名以按区域放置项目。
6. 选择仅导出容器 CSS 还是连同逐项 CSS，然后复制结果。

示例

Flex · direction row · justify-content center · align-items center · gap 12

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

Grid · custom columns: repeat(auto-fit, minmax(120px, 1fr)) · gap 16

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  grid-template-rows: repeat(2, 1fr);
  justify-items: start;
  align-items: stretch;
  gap: 16px;
}

Grid · areas: header row, sidebar + main, footer row

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  justify-items: start;
  align-items: stretch;
  gap: 16px;
}

Flex · export container + items · item 2 flex-grow 1

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

.container > :nth-child(2) {
  flex-grow: 1;
}

常见问题

这里的 Flexbox 和 Grid 有什么区别？

Flex 模式沿单一轴线排列项目，提供 flex-direction、flex-wrap、justify-content 和 align-items。Grid 模式用 grid-template-columns 和 grid-template-rows 以及 justify-items、align-items 在二维中排列项目。用开关切换模式，即可对比两者处理同一对齐的方式。

如何为单个项目设定样式？

打开「设置」，用逐项控制为每个子项设置 order、flex-grow、flex-shrink、flex-basis 和 align-self（Flex），或列/行跨度和 align-self（Grid）。把「导出」设为「容器 + 逐项」，工具就会为你自定义的每个项目添加一条 .container > :nth-child(n) 规则。

可以使用 auto-fit 或 minmax() 等自定义轨道尺寸吗？

可以。在 Grid 模式下将轨道尺寸切换为「自定义」，输入任意有效的 grid-template-columns/rows 值——像素、fr 单位、minmax()，或用于响应式列的 repeat(auto-fit/auto-fill, minmax(120px, 1fr))。预览和生成的 CSS 会随输入更新。

grid-template-areas 编辑器有什么作用？

在 Grid 模式下开启它，为网格的每个单元格命名；工具会拼装出 grid-template-areas 声明，空单元格会变成点号。命名区域也会创建命名网格线，你可以在某项的 grid-area 字段中输入区域名，把该子项放到对应区域。

我的数据会被上传到任何地方吗？

不会。演练场完全在你的浏览器中通过 JavaScript 运行，因此你的设置和生成的 CSS 绝不会发送到服务器。它能保护隐私，页面加载后甚至还能离线使用。