VLANlab
目录
关于
VLANlab
Frontend
11 tools
CSS Unit ConverterColor ToolkitGradient GeneratorcURL BuilderURL ParserURL Encoder/DecoderHTTP Status CodesBox Shadow GenFavicon GeneratorFlex & Gridrobots.txt Tester
VLANlab

计算 • 查找 • 验证

What Is My IP?IPv6 TestSpeed Test
DNS LookupDNS PropagationDNS Health CheckerSPF AnalyzerPTR LookupCAA RecordSRV RecordDNS TraceDNS PrivacyDANE / TLSADNSSEC CheckerSPF BuilderDKIM GeneratorZone DiffPTR Zone Generator
Subnet CalculatorCIDR Range ViewerVLSM CalculatorVLAN PlannerBandwidth CalcIPv6 Subnet CalcIP ↔ BinarySupernet CalcCIDR MergeCIDR to IP RangeCIDR SplitIPv4 → IPv6CIDR OverlapFree IP Space FinderDHCP CalculatorMTU Calculator
WHOIS LookupDomain Age CheckerSubdomain FinderIP GeolocationASN / BGP LookupIP Blacklist CheckReverse IP LookupMAC Address LookupBGP Prefix LookupRPKI / ROA CheckDomain Availability
Email InspectorDKIM CheckerEmail HeadersSMTP TestSMTP TLS CheckMX Health CheckEmail SecurityDMARC Generator
Temp Mail很快
Is It Down?SSL/TLS CheckerOpen Port CheckerOG Tag CheckerOCSP CheckerPing / LatencyHTTP InspectorRedirect ChainCSP AnalyzerTech Stack CheckerBetaTracerouteBetaHTTP/2 + HTTP/3robots.txt ViewerSSL Cert DecoderBanner GrabberWebSocket TesterCORS TesterDomain MonitoringHTTP TimingStructured DataPWA ManifestSEO Auditor
One-Time SecretHash GeneratorPassword StrengthSecurity.txtCT Log SearchAXFR Zone Test
HTTP Sec Score很快
WebRTC Leak TestIP Reputation
JSON FormatterYAML FormatterBase64 / URL EncodeJWT DecoderRegex TesterUnix TimestampCron BuilderUUID / ULIDPunycode / IDNBase ConverterACL Generator
CSS Unit ConverterColor ToolkitGradient GeneratorcURL BuilderURL ParserURL Encoder/DecoderHTTP Status CodesBox Shadow GenFavicon GeneratorFlex & Gridrobots.txt Tester
Text CompareCase ConverterText CleanerText AnalyzerText TransformerList ToolsLorem GeneratorSlug Generator
Cloud VPC PlannerCloud IP RangeSecurity GroupsIAM AnalyzerK8s CIDR PlannerFirewall BuilderHCL FormatterEgress Cost CalcCloud DNS Zone
VM Cost Estimator很快
Proxmox Net ConfigVMware Port GroupHyper-V vSwitchVXLAN VNI PlannerKVM Net ConfigXCP-ng NetworkNSX-T Segment
Disposable Email DetectorPhone InspectorTor Exit NodeVPN/Proxy DetectDomain ReputationTyposquat DetectUsername SearchFavicon Hash
GitHub ActionsDockerfile Gendocker-composeArgoCD AppK8s Manifests
关于

© 2026 VLANlab

无需登录 · 无广告 · 无追踪

2.43.fdd8a93

CSS Flexbox 和 Grid 可视化工具

使用实时预览功能，以可视化的方式构建 CSS Flexbox 和 Grid 布局。控制容器和项目属性，然后复制可直接使用的 CSS。

Container
Item 1
1
2
3
4
5
Container CSS
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
gap: 8px;
Item CSS
/* all items use defaults */

相关工具

Box Shadow Generator

通过实时预览，直观地构建 CSS 阴影效果。控制偏移量、模糊度、扩展范围、颜色和多层效果。立即复制可直接使用的 CSS 代码。

CSS Unit Converter

立即在所有 14 种 CSS 单位之间进行转换。输入 px、rem、em、vw、vh、pt、cm、in 或任何其他单位，即可同时查看所有转换结果，并支持上下文相关的相对单位转换。

Gradient Generator

以可视化的方式构建 CSS 渐变。配置线性渐变、径向渐变和圆锥渐变的颜色停止点、不透明度和位置，并复制可直接使用的 CSS 代码。

关于此工具

关于 CSS Flexbox 和 Grid 可视化工具

CSS Flexbox 和 Grid 是现代 CSS 中的两大主要布局系统。Flexbox 处理一维布局（行或列），非常适合导航栏、工具栏和组件对齐。CSS Grid 处理二维布局（行和列同时存在），是页面布局、卡片网格和复杂 UI 结构的理想选择。这两个系统都采用容器/元素模型：容器的属性定义整体布局，而各个元素的属性控制它们在容器中的排列方式。

如何使用

使用顶部的选项卡在 Flexbox 和 Grid 模式之间切换。调整容器属性以设置整体布局方向、换行、对齐方式和间距。单击项目编号或直接在预览中单击以选择项目，然后配置其各个属性。预览会随着值的更改而实时更新。复制容器 CSS 和项目 CSS 代码块，并将其粘贴到您的样式表中。

CSS 输出会根据项目类（.item-1、.item-2 等）对项目进行分组覆盖。仅使用容器默认值的项目不会产生任何输出 - 只有被覆盖的项目才会列出。对于网格模式，列和行的跨度值使用 span N 简写。repeat() 模板对于等宽轨道写作 repeat(N, Xunit)。您可以根据布局需求调整单位选择器，在 fr、px 和 % 之间切换。