Grid/Flexbox可视化演练场 - 在线工具箱

Grid/Flexbox可视化演练场

在线免费CSS Grid与Flexbox可视化演练场，加减行列、调整间距对齐实时预览，同步生成CSS代码，学习布局必备工具。

flex-direction（方向）

justify-content（主轴对齐）

align-items（交叉轴对齐）

flex-wrap（换行）

gap（间距）

10px

子元素数量

6

实时预览

1

2

3

4

5

6

CSS

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

💡 左侧调参数，右侧实时看效果，下方直接复制标准 CSS 代码

💡 Grid 演示固定使用 repeat(N, 1fr) 等分列，实际项目可改成 fr/px/auto 任意组合

常见问题

Grid和Flexbox两种模式都能练吗？

可以，顶部一键切换。Grid 模式可调行数、列数、间距和区域对齐；Flexbox 模式可调主轴方向、换行、对齐与间距，参数所见即所得。

生成的CSS代码可以直接用吗？

可以。实时输出的是标准 CSS（display:grid / display:flex 系列），所有主流浏览器都支持，复制到任何项目即可生效。

适合CSS初学者吗？

非常合适。拖动数值立即看到容器内色块的变化，比背文档直观得多，配合右侧代码对照能快速建立"属性-效果"的映射记忆。