SheepDev

Flexbox 与 Grid 生成

Flexbox 与 Grid 生成可在浏览器中根据 Flexbox/Grid 设置生成并预览布局 CSS。

Flexbox 与 Grid 生成

⌂ 输入和结果仅在此浏览器中处理,不会自动保存或发送。

设置
等待输入
● 实时预览

输入与条件

设置

输出

等待输入

完整文本结果

使用方法

选择 Flexbox 或 Grid,调整列数、间距和对齐,对照预览与生成 CSS。

预览不等于完整响应式设计,应以实际文字量和宽度检查换行溢出,并在目标网站设计响应规则。

示例

原理与限制

每个输入限1,048,576字节,输出限33,554,432字节,处理时间限5,000毫秒。输入不会被静默截断。

指南

相关工具

Web、UI与CSS

CSS 单位计算

CSS 单位计算可在浏览器中按明确字体与视口条件转换 px、rem、em、vw、vh。

Web、UI与CSS

Box Shadow 生成

Box Shadow 生成可在浏览器中根据位置、模糊、扩散与透明度生成并预览 box-shadow。