VLANlab
Catálogo
Acerca de
VLANlab
Frontend
11 tools
CSS Unit ConverterColor ToolkitGradient GeneratorcURL BuilderURL ParserURL Encoder/DecoderHTTP Status CodesBox Shadow GenFavicon GeneratorFlex & Gridrobots.txt Tester
VLANlab

CALCULAR • BUSCAR • VERIFICAR

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 MailPronto
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 ScorePronto
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 EstimatorPronto
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
Acerca de

© 2026 VLANlab

Sin necesidad de iniciar sesión · Sin anuncios · Sin seguimiento

2.43.fdd8a93

Visualizador de Flexbox y Grid de CSS

Crea diseños CSS con Flexbox y Grid de forma visual con vista previa en tiempo real. Controla las propiedades de los contenedores y los elementos, y luego copia el código CSS listo para usar.

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 */

Herramientas relacionadas

Box Shadow Generator

Crea sombras de cuadro CSS de forma visual con vista previa en tiempo real. Controla el desplazamiento, el desenfoque, la extensión, el color y las capas múltiples. Copia al instante el código CSS listo para usar.

CSS Unit Converter

Convierte al instante entre las 14 unidades CSS. Introduce px, rem, em, vw, vh, pt, cm, in o cualquier otra unidad y visualiza todas las conversiones de un solo vistazo, con compatibilidad con unidades relativas adaptadas al contexto.

Gradient Generator

Crea degradados CSS de forma visual. Configura los puntos de color, la opacidad y las posiciones para degradados lineales, radiales y cónicos, y copia el código CSS listo para usar.

Acerca de esta herramienta

Acerca del visualizador de CSS Flexbox y Grid

CSS Flexbox y Grid son los dos principales sistemas de maquetación del CSS moderno. Flexbox se encarga de las maquetaciones unidimensionales (filas o columnas) y resulta ideal para barras de navegación, barras de herramientas y la alineación de componentes. CSS Grid gestiona diseños bidimensionales con filas y columnas simultáneamente, lo que lo convierte en la herramienta adecuada para diseños de página, cuadrículas de tarjetas y estructuras complejas de interfaz de usuario. Ambos sistemas utilizan un modelo de contenedor/elemento: las propiedades del contenedor definen el diseño general, mientras que las propiedades de los elementos individuales controlan cómo encajan en él.

Cómo utilizarlo

Cambia entre los modos Flexbox y Grid utilizando las pestañas de la parte superior. Ajusta las propiedades del contenedor para definir la dirección general del diseño, el ajuste de texto, la alineación y los espacios. Selecciona un elemento haciendo clic en su ficha numerada o directamente en la vista previa y, a continuación, configura sus propiedades individuales. La vista previa se actualiza en tiempo real a medida que cambian los valores. Copia los bloques «CSS del contenedor» y «CSS del elemento» y pégalos en tu hoja de estilos.

La salida CSS de los elementos de los grupos anula los valores por clase de elemento (.item-1, .item-2, etc.). Los elementos que solo utilizan los valores predeterminados del contenedor no generan ninguna salida; solo se muestran los elementos cuyos valores se han anulado. En el modo Grid, los valores de extensión de columnas y filas utilizan la notación abreviada span N. La plantilla repeat() se escribe como repeat(N, Xunit) para pistas de ancho igual. Ajusta el selector de unidades entre fr, px y % para que se adapte a tus necesidades de diseño.