justify-content
space-between
Resultado
Cajas empujadas hacia los bordes opuestos
Herramientas de diseño
Generador de Flexbox — Diseño visual unidimensional
Ajusta flex-direction, justify-content, align-items, wrap y gap con vista previa en vivo. Añade o elimina cajas para ver el ajuste de línea y el espaciado y copia el CSS generado (y el andamiaje HTML) en tu proyecto.
DiseñoCSSMaquetación
Cambio rápido:Generador de CSS Grid
Añadir esta herramienta a favoritos
No se ha seleccionado un modo de almacenamiento de favoritos.
Acciones rápidas
Copia la URL de esta herramienta o abre la hoja de compartir del sistema en un dispositivo compatible.
设计配色
Generador de Flexbox
4 项
Flex 容器 row · nowrap
.container {
display: flex;
} Casos de uso
- Crea prototipos de filas de igual altura y espaciado
- Experimenta con el comportamiento de ajuste a medida que crece el número de elementos
- Copia un fragmento de contenedor Flexbox como punto de partida
Cómo usar
- Define las reglas de alineación del eje principal y del eje transversal
- Ajusta wrap, gap y el número de elementos
- Copia el CSS o HTML generado
Entrada y salida de ejemplo
FAQ
¿Expone todos los controles de flex-basis?
Se centra en el flujo a nivel de contenedor. Los elementos usan actualmente una configuración sencilla de grow/shrink/basis en lugar de cubrir todos los casos por elemento.
Herramientas
Herramientas relacionadas
Continúa con otra herramienta traducida para una tarea cercana.
Generador de CSS Grid
Generador de CSS Grid — Filas, columnas y gaps
Define el número de columnas y filas, además de los espacios, para generar una maquetación básica con display:grid. Previsualiza la estructura de pistas, prueba plantillas rápidas y copia CSS o HTML para paneles de administración y rejillas de tarjetas.
CSS Grid Maquetación