关于 CSS 布局生成器
该工具用于快速生成 Flexbox 或 Grid 布局代码，支持参数配置、实时预览和 CSS 导出下载。
核心功能
- 双布局引擎：支持 Flexbox 与 Grid 切换。
- 参数化配置：方向、换行、对齐、列行模板、间距等可调。
- 项目预览：支持增减预览项观察布局分配效果。
- 预设能力：Grid 提供常见布局模板快速启用。
- 代码输出：支持复制和下载生成 CSS。
使用说明
- 选择布局类型（Flexbox 或 Grid）。
- 设置核心参数（对齐、模板、gap 等）。
- 在预览区增减元素并观察结果。
- 复制或下载生成代码接入项目。
使用场景
- 页面骨架与组件容器布局搭建。
- 快速验证不同对齐策略的视觉表现。
- 设计稿转代码时的布局参数落地。
常见问题
预览和真实页面有偏差怎么办？
检查父级宽度、全局样式干扰和内容真实长度，必要时在目标容器中二次微调。
Flex 与 Grid 如何取舍？
一维排列优先 Flex，二维网格优先 Grid；混合场景可嵌套使用。