CSS Flexbox 布局生成器

工具介绍

直观调整弹性布局的方向、换行、间距和对齐，预览效果并获取可用的 CSS、HTML。

设计工具

使用说明

设置排列方向、是否换行、主轴分布和交叉轴对齐，再调整间距与子项数量。改变预览宽度可观察换行效果，切换 CSS、HTML 后分别复制或下载。

预览使用的 Flex 属性与输出一致。子项以 100 px 为基础尺寸，最小高度为 80 px，可按自己的内容修改。最多 48 个子项，间距为 0–80 px；预览宽度不包含在导出的 CSS 中。

相关工具

颜色格式转换

转换 HEX、RGB、HSL 与透明度，实时查看色样，并复制可直接使用的 CSS 颜色。

设计工具

颜色对比度检查

检查文字与背景的 WCAG 2.2 对比度，实时预览并分别显示普通与大号文字的 AA、AAA 结果。

设计工具

CSS 渐变生成器

可视化制作线性或径向渐变，编辑 2–8 个色标和位置，实时预览并复制 CSS。

设计工具

CSS 阴影生成器

直观调整位移、模糊、扩展、颜色与透明度，预览外阴影或内阴影并复制 box-shadow。

设计工具

评论

0

最新 最热 连续加载 分页

登录后参与评论。

暂无评论

回复讨论

按时间查看完整回复脉络；每条回复都会标明它回应的具体内容。