Loading...
Loading...
可视化搭建 CSS flex 布局并复制代码。
Flexbox 很强,但属性名容易记混:哪个是 justify-content、哪个是 align-items,各自又沿哪条轴。这个工具让你切换每个选项、立刻看到布局反应,边做边学,而不是靠猜。
选 flex-direction、justify-content、align-items、flex-wrap 和 gap,再增减子项。实时容器随每次改动更新,子项高度不一以便看清对齐,下方还写出对应的 CSS 供你复制。这是快速调对布局、理解主轴与交叉轴行为的好办法。一切都在浏览器里运行。
flex-direction、justify-content、align-items、flex-wrap、gap,都是一键切换。
容器即时更新,子项高度不一,对齐效果一目了然。
增减子项,看换行和间距如何变化。
容器对应的 CSS 已写好,一键复制。
切换方向时,看 justify 和 align 的含义如何互换。
无账号、不上传;预览是本地渲染的真实 CSS。
把 flex-direction 设为 column,看 justify-content 和 align-items 如何换轴,这是理解两者区别最快的方式。
为主轴选一个 flex-direction。
用 justify-content 和 align-items 定位子项。
按需调整 wrap、gap 和子项数量。
把生成的 CSS 复制进你的容器。
调到预览符合设计,再复制 CSS。
看清楚每个属性和两条轴的行为。
快速找到能居中内容的 justify 和 align 组合。
实时演示 flex 行为,而不是干讲。
你的选择作为内联 flex 样式应用到真实容器元素上,所以预览就是浏览器将渲染的;同样的值序列化成可复制的 CSS 块。
无账号、无网络请求;布局在本地计算和渲染。
每次改动只更新几个内联样式,所以预览始终即时。