design
Gratis
Sin registro
Generador de códigos QR
Configure visualmente las propiedades de Flexbox y obtenga el CSS generado al instante.
Cargando la herramienta…
Acerca de esta herramienta
Ajuste cada propiedad del contenedor Flexbox — flex-direction, flex-wrap, justify-content, align-items, align-content y gap — y vea una vista previa en vivo de 5 cuadros de colores responder en tiempo real. Haga clic en cualquier cuadro individual para ajustar sus propias propiedades flex-grow, flex-shrink, flex-basis, align-self y order, luego copie el CSS terminado con un clic.
Cómo usar
- 1 Paso 1: Use el panel Contenedor a la izquierda para configurar las propiedades de dirección, ajuste y alineación.
- 2 Paso 2: Observe los cuadros de colores en la vista previa actualizarse en vivo a medida que cambia cada propiedad.
- 3 Paso 3: Haga clic en cualquier cuadro individual para seleccionarlo y ajustar sus propias propiedades flex en el panel Elemento.
- 4 Paso 4: Copie el CSS generado para el contenedor, el elemento seleccionado o todos los elementos a la vez.