Flexbox 可视化

可视化调试 Flexbox 布局属性

Flexbox 可视化是一款免费在线开发者工具。可视化调试 Flexbox 布局属性常见相关词：css · flexbox · flex · 布局 · justify · align。本页可直接使用，不必注册。

1
2
3
4
.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
}
使用帮助

使用说明

  1. 调整容器属性：flex-direction、justify-content、align-items、flex-wrap
  2. 调整子项属性：flex-grow、align-self 等
  3. 实时预览布局变化
  4. 一键复制生成的 CSS 代码

常见问题

  • 数据处理安全吗？ 全程浏览器本地处理，不联网
  • 属性不生效？ 注意父容器需设置 display: flex
  • 移动端兼容？ 现代浏览器全面支持 Flexbox

更多开发者工具

查看全部

JSON 格式化

JSON 格式化、压缩、校验、转 Go struct / TS interface

JSON 字段搜索

在 JSON 中按字段名/值/路径搜索，高亮匹配，支持 jq 表达式

时间戳转换

Unix 时间戳与日期互转，支持秒和毫秒

Cron 表达式

Cron 表达式生成与解析，下一次执行时间预览

UUID 生成器

生成 UUID v4 / v7 / ULID / NanoID

Hash 计算

计算文本或文件的 MD5 / SHA1 / SHA256 / SHA512

JWT 解析

解析 JWT 的 Header 和 Payload，查看过期时间

URL 编解码

URL / URI 组件的编码与解码

关于 Flexbox 可视化 的常见问题

Flexbox 可视化能做什么？

Flexbox 可视化属于开发者工具。可视化调试 Flexbox 布局属性你可以直接在本页完成操作。

谁适合使用Flexbox 可视化？

需要处理与css · flexbox · flex · 布局 · justify · align相关任务、又不想安装桌面软件的用户，可以把Flexbox 可视化当作即开即用的网页工具。

使用Flexbox 可视化安全吗？数据会上传吗？

该工具在浏览器本地运行。我们不会因为你使用Flexbox 可视化而收集你输入的内容。

还有哪些同类工具？

本页底部列出了同属开发者工具的相关工具，方便对比选择。