CSS Flexbox生成器
以可视化方式创建CSS flexbox布局。在调整方向、对齐、换行和间距时实时查看效果。
1
2
3
4
display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; flex-wrap: nowrap; gap: 8px;
什么是CSS Flexbox生成器？
Flexbox是CSS中布局元素的现代方式，比浮动（float）或绝对定位简单得多。相关属性包括：flex-direction（行或列）、justify-content（主轴对齐）、align-items（交叉轴对齐）、flex-wrap和gap。本工具将它们全部呈现出来，并提供实时预览。
常见问题
该用Flexbox还是Grid？▼
对于一维布局（一排按钮、一个导航栏）使用flexbox。对于二维布局（响应式网格中的卡片）使用CSS Grid。
相关工具
颜色转换工具（HEX/RGB/HSL）
在HEX、RGB和HSL格式之间转换颜色。可视化选取颜色，或手动输入数值。
CSS Box Shadow生成器
以可视化方式创建CSS box-shadow值。实时预览并复制生成的CSS。
CSS渐变生成器
创建线性和径向CSS渐变。以可视化方式选择颜色，并复制生成的CSS。
Cubic Bezier缓动曲线生成器
为CSS创建cubic-bezier缓动曲线。内置标准预设。
配色方案生成器
从任意基准色生成和谐的配色方案。支持互补色、邻近色、三角色和单色方案。
CSS Border Radius生成器
以可视化方式创建复杂的CSS border-radius值。可独立控制每个圆角。