设计

Flexbox 与 Grid 布局生成器

用可视化方式排一行、一列或一整片网格，CSS 会随手上的调整一起更新。在 Flexbox 弹性盒和 CSS Grid 网格之间切换，设定方向、对齐、换行、列数行数和间距，再通过一组带编号的方块看排列效果，这些方块和真实元素的表现完全一致。不必再纠结居中到底该用 justify-content 还是 align-items，改一个控件，方块就会跟着移动。输出是一份干净、可直接复制的容器类 CSS，全部在浏览器里计算，可以直接放进样式表、组件或 Tailwind 分层，整个过程不会有任何内容离开页面。

  • 在 Flexbox 与 CSS Grid 之间切换，正在搭的布局不会丢失
  • 方向、justify、align、换行、列数、行数和间距都能即时看到反馈
  • 带编号的方块预览直观呈现每个属性如何移动真实元素
  • 复制干净的容器类 CSS，可直接用于样式表、组件或 Tailwind
  • 所有计算都在浏览器里完成，布局内容不会被上传
工具/Flexbox 与 Grid 布局生成器
display: flex
12px
5
5 个
1
2
3
4
5
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>
快捷操作

功能简介

把前端每天都会用到的两套 CSS 布局系统放进同一个面板，让你针对任务挑出合适的那一套，靠眼睛调整效果，而不是在样式表里反复猜属性名。

  1. 01

    Flexbox 与 Grid 集于一处

    在适合一维行列的 Flexbox 和适合二维布局的 CSS Grid 之间切换，对比时还能沿用同一份间距和元素数量。

  2. 02

    对齐属性全部摊开可见

    弹性盒的方向、justify-content、align-items、换行和 align-content，网格的列数、行数、auto-flow、justify-items 和 align-items，全部以直接的控件呈现。

  3. 03

    预览表现接近真实元素

    带编号的方块对每个属性的响应都和真实子元素一致，一眼就能看出元素是居中、分散、拉伸还是换行。

  4. 04

    常用预设作为起点

    居中一行、两端对齐的条、纵向堆叠、换行排列和网格等常见写法都只需一次点击，套用后再细调。

  5. 05

    输出干净、可直接复制

    CSS 只针对一个容器类，旁边还提供匹配的 HTML 结构，读起来清晰，能直接粘进样式表、组件或原型。

  6. 06

    默认本地、保持私密

    每一次预览和每一行生成的 CSS 都在浏览器里计算，未发布的布局和内部界面都不会上传到服务器。

如何使用

从一个空容器到能用的布局 CSS 只需几步，无论你是在还原设计稿，还是在理解这些属性之间的关系。

  1. 01

    一行或一列选 Flexbox，需要同时控制列和行时选 Grid。

  2. 02

    挑一个接近目标的预设，或从默认状态出发，逐个调整控件。

  3. 03

    设定主要属性：弹性盒的方向和 justify 或 align，网格的列数和行数。

  4. 04

    调整间距和元素数量，直到预览的疏密程度符合需要。

  5. 05

    在预览方块上确认排列效果，再把容器 CSS 复制进样式表或组件。

功能说明

Flexbox 和 Grid 几乎覆盖所有现代布局，所以一个可视化编辑器要做的是干净地映射到真实 CSS，而不是把它藏在自造的名词背后。

  • 弹性盒控件覆盖 flex-direction、flex-wrap、justify-content、align-items 和 align-content
  • 网格控件覆盖用 repeat 与 1fr 写的列轨和行轨，以及 justify-items 和 align-items
  • 共享的间距和元素数量让你用同一份内容对比 Flexbox 和 Grid
  • 预览使用真实的弹性盒和网格容器，对齐、换行和分布都表现真实
  • align-content 只在开启换行时出现，对应该属性真正起作用的时机
  • 预设涵盖居中、两端对齐的条、纵向堆叠、换行排列和多列网格
  • 随机功能能快速尝试陌生的属性组合，帮助建立直觉
  • 输出是只含你改过属性的干净容器类，便于阅读和改写
  • 生成的 CSS 可直接粘进样式表、CSS Module、组件样式或 Tailwind 分层
  • 所有计算都在浏览器本地完成，未发布工作的布局始终保持私密

适合哪些场景

前端工作里布局问题层出不穷，而其中大多数其实是在问该用哪个 flex 或 grid 属性。让答案在屏幕上动起来，比再翻一遍文档更快。

  1. 内容居中

    确认 justify-content 和 align-items 的哪种组合能让方块在水平和垂直方向都居中，不用在两者之间反复猜。

  2. 导航栏

    用 space-between 把标志推到一侧、链接推到另一侧，这是几乎每个页头和工具栏都会用到的写法。

  3. 卡片与商品网格

    用网格把卡片排成等宽的列并保持一致间距，再调整列数，观察布局如何重新排列。

  4. 响应式换行排列

    观察标签、徽章或按钮在一行放不下时，flex-wrap 和 align-content 如何安排它们。

  5. 表单与堆叠字段

    把标签和输入框纵向堆叠并保持均匀间距，这是表单、设置面板和侧边栏常见的弹性盒布局。

  6. 图库与仪表盘

    把缩略图或小组件排成整齐的网格，在接入真实内容前先判断疏密和间距。

  7. 学习 flex 与 grid

    一次只改一个属性，看方块如何响应，从而建立起对两套布局系统真实工作方式的直觉。

  8. 快速搭布局原型

    可视化勾勒一个页面或组件的结构，再把容器 CSS 复制出来，作为真实标记的起点。

延伸阅读

布局确定后，用 阴影生成器 为表面加上深度和层次；当某个区块需要更丰富的背景时，再配合 渐变生成器 一起设计，让间距、深度和色彩在组件里保持一致。

使用建议

Flexbox 和 Grid 试错成本低却也容易用偏，养成几个习惯能让生成的布局在不同屏幕和内容下都稳。

  • 内容沿单一方向排列时用 Flexbox，需要同时安排行和列时用 Grid。
  • 优先用 gap 而不是给子元素加 margin，这样间距均匀，也省去处理边缘 margin 的麻烦。
  • justify-content 控制主轴方向的分布，align-items 控制交叉轴，在预览里确认哪个是哪个。
  • 让内容和可用空间决定换行，而不是为每一处小变化都硬写断点。
  • 网格里用 repeat 加 1fr 能保持列宽一致，需要不同宽度时再写明确的轨道尺寸。
  • 用少量和大量元素分别测试布局，因为分布类属性在内容增多时表现会不同。
  • 把反复出现的布局写法沉淀成可复用的类或组件，而不是到处重复同样的属性。
  • 在项目真实断点下验证结果，预览呈现的是机制，并不等于你的实际容器宽度。

边界与注意事项

这个工具聚焦于塑造布局的核心容器属性，因此有几个相关领域刻意不在范围内。

  • 它生成的是容器 CSS，flex-grow、flex-basis、order 以及网格的列行跨度等单个元素的规则不在这里产出。
  • 网格轨道使用 repeat 加 1fr，命名线、grid-template-areas 以及固定与分数混合的轨道需要手动编辑。
  • 预览使用固定高度的容器，依赖真实内容高度的布局应在项目里再确认一次。
  • 跨断点的响应式表现取决于你实际的容器宽度以及媒体查询或容器查询。
  • 现代 flex 和 grid 的浏览器差异很小，但很旧的浏览器可能需要本工具不会添加的回退。
  • 它不输出完整的 HTML 结构，只输出应用到你自己标记上的容器 CSS。

常见问题

在 Flexbox 与 Grid 之间取舍、以及把布局想法转成可用 CSS 时，最常出现的一些问题。

该用 Flexbox 还是 Grid？

内容沿单一方向排列时用 Flexbox，比如一排按钮或一列字段；需要同时控制列和行时用 Grid，比如卡片图库或仪表盘。

生成的 CSS 能直接用于生产吗？

可以。输出是标准的容器类 CSS，能直接粘进样式表、CSS Module、组件样式或 Tailwind 分层，无需改动。

怎样让元素在两个方向都居中？

在 Flexbox 里把 justify-content 和 align-items 都设为 center；在 Grid 里把 justify-items 和 align-items 都设为 center，改动控件后预览会立即确认。

为什么 align-content 有时才出现？

align-content 只有在弹性盒元素换到多行时才起作用，所以开启换行后这个控件才出现，对应它真正生效的时机。

它会生成单个元素的属性吗？

不会。本工具聚焦容器属性，flex-grow、flex-basis、order 和网格跨度等是你之后给单个子元素补充的布局细节。

输出能配合 Tailwind 使用吗？

可以。你可以把这份 CSS 粘进自定义分层或组件类，也可以把它当作对应 flex 和 grid 工具类的参照。

网格输出里的 1fr 是什么意思？

fr 是网格里剩余空间的一个分数单位。repeat(3, 1fr) 会创建三列，每列等分可用宽度。

编辑时我的布局会被上传吗？

不会。所有预览渲染和 CSS 生成都在浏览器本地完成，因此用于未发布的产品界面和保密设计都很安全。

更多相关工具

布局是其他一切所在的框架。结构定下来后，再处理深度和背景，让组件看起来是一块完成的表面，而不只是一堆方块的排列。