Flexbox 实战 Playground:在真实 flex 容器上调每一个容器/子项属性, 直接复制对应 CSS。flex-direction、justify-content、align-items、gap、order、flex-grow/shrink/basis、align-self 全覆盖。100% 浏览器本地。
- 本地处理
- 分类 颜色设计
- 适合 把视觉想法转成可复用的颜色值。
点击预览里的子项即可编辑它
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
gap: 12px;
}这个工具能做什么
一个能上手玩的 Flexbox Playground, 同时也是 CSS 生成器。改一个容器属性, 预览区(一个真的 `display: flex` 盒子, 不是示意图)立刻重排, 你再也 不用靠脑补 `justify-content: space-between` 和 `space-around` 到底差在哪。 容器侧: `flex-direction` (row / row-reverse / column / column-reverse)、 `flex-wrap` (nowrap / wrap / wrap-reverse)、`justify-content` (六个值全有, 含 space-evenly)、`align-items`、`align-content` (选 nowrap 时自动禁用, 因为单行容器上它根本不生效)、以及任意单位的 `gap`。 子项侧: 增减子项 (1–12 个), 点预览里任意一个盒子选中它, 再调它的 `order`、`flex-grow`、`flex-shrink`、`flex-basis`、`align-self`。生成的 CSS 只输出你真正改过的属性, 默认值不写出来, 所以拿到的是干净、可以 直接粘贴的 `.container { … }` 加每个子项的 `.item-N { … }`, 并且会自动 识别成 `flex: 1` / `flex: none` 这种简写。 每个控件都接 URL, 你复制的链接发出去, 同事打开就是你做的这套布局。 不上传, 不注册, 不打点。
工具细节
- 输入
- 文本 + 数值
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 复制 + 预览
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 可分享链接状态
- 关键设置会进入 URL，复制链接后别人能复现同一组参数。
- 性能预算
- 首屏 JS ≤ 14 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 颜色设计 · 设计师
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
Flexbox 可视化 Playground 与 CSS 生成器 适合怎么用
适合在真实界面工作中选色、查色、转色值或整理配色。
适合颜色任务
- 把视觉想法转成可复用的颜色值。
- 界面上线前检查对比度和可访问性。
- 让品牌、设计和前端实现的颜色决策对齐。
颜色检查项
- 对比度要按真实背景检查,不要只看色块。
- 有深浅主题时,两套都要单独看。
- 复制设计系统或代码库真正需要的格式。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
让一个元素水平垂直都居中
经典的"居中一个 div"。容器的 `justify-content` 设 `center`, `align-items` 设 `center`, playground 里留一个子项, 盒子就稳稳停在 正中, 主轴由 justify 居中, 交叉轴由 align 居中。复制那两行 `.container` 规则即可。这是老的 `position: absolute; transform: translate(-50%, -50%)` 写法的现代替代: 没有 magic number, 容器多大 都成立, 内容变了也不散。这里三秒搞定, 不用去翻 Stack Overflow。
做一个 logo 在左、链接挤到右的导航栏
一个 header, logo 贴左边缘, 导航链接停在最右。设 `flex-direction: row`, 然后选中 logo 子项给它 `flex-grow: 1`, 它 吃掉所有剩余空间, 把后面的东西全推到右边。或者用 `justify-content: space-between`, logo 当 1 号、链接组当 2 号。两种都在预览里试一下, 看哪种间距你更喜欢, 复制 CSS。最常见的 header 布局就解决了, 也不用 去记那个容易忘的 `margin-left: auto`。
让三张卡片不管内容多少都等宽
定价行或者 Feature 网格, 每张卡必须正好三分之一宽, 哪怕其中一张 文字更多。加三个子项, 逐个选中, 设 `flex-grow: 1`、`flex-shrink: 1`、 `flex-basis: 0%`, 工具会在输出里把它收成干净的 `flex: 1` 简写。 现在三张被强制等宽, 因为 `flex-basis: 0` 让它们从 0 起步、平分空间。 看预览: 以后你在真实代码里给某张卡填更长的文案, 列依然等宽, 这是 `flex: auto` 保证不了的。
提交前先看清 wrap + align-content 到底什么效果
有一个会换到多行的标签列表或者画廊, 你拿不准这些行之间该怎么排。 加八个子项, 设 `flex-wrap: wrap`, 把预览宽度缩窄让它们换成两行, 然后把 `align-content` 在 `flex-start`、`center`、`space-between`、 `stretch` 之间轮一遍, 看行怎么动。这个控件在你开 wrap 之前是禁用的, 所以你是在动手中学会这个依赖关系的。挑看着对的那种间距, 复制 CSS, 不用在真实项目里反复"改-存-刷新"。
不动 HTML 源码就把子项视觉重排
你需要让第三个子项在某个断点上排到最前, 但不能改 DOM 顺序 (会破坏 tab 顺序或者 CMS 的字段顺序)。在预览里选中那个子项, 把它的 `order` 设成 `-1`, 它就跳到最前, 而源码顺序原地不动。playground 立刻显示 视觉结果, 导出给你 `order: -1;` 这条规则丢进媒体查询。这是对无障碍 友好的重排方式: 视觉顺序变了, 源码 (和读屏器) 顺序没变。
常见踩坑
在 row 容器里用 justify-content 做垂直居中, 那是交叉轴, 该用 align-items。justify-content 是沿主轴移动 (row 里是水平, column 里是垂直)。
指望 align-content 在 nowrap 容器上起作用, 它只排多条 flex 行, 而 nowrap 只有一行。先把 flex-wrap 开成 wrap (本工具在你开之前会禁用这个控件)。
给子项都设 flex-grow 为 1 然后想不通为什么 justify-content 失效了, 子项把剩余空间吸干后没空间可分, 任何 justify-content 值看起来都一样。
把 flex 1 (= 1 1 0%, 强制等宽) 和 flex auto (= 1 1 auto, 从内容尺寸起步) 搞混。如果等宽列在不同内容下飘开了, 说明你该用 1 却用了 auto。
给 flex 子项设了 width 却没配 flex-shrink 0, 然后惊讶它被压扁, flex 子项默认会收缩。要么 width 配 flex-shrink 0, 要么用 flex-basis 加 0 shrink 当硬下限。
隐私说明
你调的每个属性(direction、wrap、justify、align、gap, 以及每个子项的 order / grow / shrink / basis / align-self)全部留在你的浏览器里。这个 工具是嵌在静态页面上的一个 React 岛: 没有服务端 endpoint, 不打点你做的 布局, 不分析你选了哪些值。分享 URL 里只有 flex 配置本身, 没有用户 ID, 没有跟踪参数。画好、关标签页, 没有一个字节离开你的设备。如果你把 URL 粘到公开频道, 任何拿到链接的人都能还原同一套布局, 这是分享功能的 目的, 但这是离开设备的唯一一份数据, 且只在你主动分享时离开。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。