Flexbox 演练场

功能介绍

调节容器与子项的 flex 属性（direction、justify、align、wrap、grow 等），实时观察布局变化并生成对应 CSS。

适合理解 flexbox 各属性的视觉效果，或快速验证布局方案。

使用说明

• 修改容器属性观察整体排列变化
• 修改子项的 flex-grow / shrink / basis 观察分配规则
• 下方代码区实时生成对应 CSS，可复制

输入输出示例

常见居中布局

display: flex; justify-content: center; align-items: center;

常见问题

为什么子项没有按 grow 比例变宽？

请检查容器是否为 flex（工具默认已设置），以及子项 basis 是否为 auto 之外的固定值。

相关工具

• Box Shadow 生成 - 可视化调节参数，生成 CSS box-shadow 代码
• CSS 渐变生成 - 可视化生成 linear / radial 渐变 CSS 代码
• Favicon 生成器 - 一张源图生成多尺寸 favicon.ico 与 PNG，本地 Canvas 处理
• 颜色转换 - HEX / RGB / HSL 互转，含对比度与色卡预览