CSS Flexbox 与 Grid 演练场

CSS Flexbox 与 Grid 演练场 是什么？

CSS Flexbox 与 Grid 演练场是一款免费的可视化沙盒，用于学习和原型设计两种主流的 CSS 布局模型，专为前端开发者、学生和设计师打造。用模式开关选择 Flex 或 Grid，再用下拉框和数字输入框设置容器属性：Flex 模式下可控制 flex-direction、flex-wrap、justify-content 和 align-items；Grid 模式下可设置列数和行数（渲染为 repeat(n, 1fr)）以及 justify-items 和 align-items。间距值和项目数量对两种模式都生效。带编号方块的实时预览会清楚地展示对齐和间距的表现，完整的 .container CSS 规则也会自动生成供你复制。每当你想在粘贴到项目前先看看某个 flex 或 grid 设置的实际效果时，都可以用它。

如何使用 CSS Flexbox 与 Grid 演练场

1. 用模式开关选择 Flex 或 Grid，确定要构建的布局模型。
2. 在 Flex 模式下，通过下拉框设置 flex-direction、flex-wrap、justify-content 和 align-items。
3. 在 Grid 模式下，设置列数和行数，以及 justify-items 和 align-items。
4. 打开「设置」修改间距（以 px 为单位）和预览中显示的项目数量。
5. 随着每个属性的改变，观察方块预览实时重新排列。
6. 复制生成的 .container 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 · columns 3 · rows 2 · justify-items start · align-items stretch · gap 16

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

Flex · direction column · justify-content space-between · align-items stretch · gap 8

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  gap: 8px;
}

常见问题

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

Flex 模式沿单一轴线排列项目，提供 flex-direction、flex-wrap、justify-content 和 align-items。Grid 模式则用 grid-template-columns 和 grid-template-rows（写作 repeat(n, 1fr)）以及 justify-items 和 align-items 在二维网格中排列项目。用开关切换模式，即可对比两种模型处理同一对齐方式的不同表现。

间距值有什么作用？

间距通过 CSS 的 gap 属性，以像素为单位设置 Flex 和 Grid 布局中每个项目之间的空隙。增大它可以让方块分得更开，设为 0 则得到紧贴的布局；预览和生成的 CSS 都会即时更新。

为什么 Grid 中的 justify-content 和 align-items 写法不同？

Grid 的 justify-items 和 align-items 使用 start、end、center 和 stretch 等关键字，而 Flex 使用 flex-start 和 flex-end。无论你处于哪种模式，工具都会输出对应的正确关键字，因此复制的 CSS 始终有效。

可以更改显示的项目数量吗？

可以。打开「设置」修改项目数量，即可增减带编号的预览方块（最多 24 个）。这只影响屏幕上的演示效果；生成的 CSS 描述的是容器，而非项目本身。

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

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