颜色格式转换
转换 HEX、RGB、HSL 与透明度，实时查看色样，并复制可直接使用的 CSS 颜色。
CSS Flexbox 布局生成器
直观调整弹性布局的方向、换行、间距和对齐，预览效果并获取可用的 CSS、HTML。
工具介绍
为一组按钮或控件确定排列方式，提前查看空间不足时的换行表现。
使用说明
设置排列方向、是否换行、主轴分布和交叉轴对齐，再调整间距与子项数量。改变预览宽度可观察换行效果，切换 CSS、HTML 后分别复制或下载。
预览使用的 Flex 属性与输出一致。子项以 100 px 为基础尺寸，最小高度为 80 px，可按自己的内容修改。最多 48 个子项，间距为 0–80 px；预览宽度不包含在导出的 CSS 中。
常见问题
导出代码包含预览容器的宽度吗？
不包含。预览宽度仅模拟可用空间；导出的是所选弹性布局属性与基础子项尺寸，容器宽度和内容样式需在实际页面设置。
切换成 column 后，居中方向为什么变了？
justify-content 控制主轴，align-items 控制交叉轴。row 的主轴是横向，column 的主轴是纵向。需要两个方向都居中时，将两项都设为 center，并确保容器在相应方向上留有可分配的空间。
相关工具
在新标签页打开
评论
0