Desarrollador / Diseño con CSS

Entorno de pruebas de Flexbox: controles CSS del contenedor y los elementos

Prueba la dirección, el ajuste, la justificación, la alineación y los espacios de flex; después ajusta el crecimiento, el encogimiento, la base, el orden y la alineación de cada elemento. Comprueba cómo cambia el diseño y copia el CSS.

Entorno de pruebas de Flexbox: controles CSS del contenedor y los elementos: Muestra un contenedor flex en directo con propiedades editables para los elementos y una breve explicación junto a cada control. La vista previa tiene una altura fija para que los efectos sobre el eje transversal sean visibles. El generador de CSS Grid permite crear diseños de cuadrícula con filas y columnas compartidas. Funciona al 100 % en tu navegador, sin subir archivos a ningún servidor.

Categoría: Herramientas de desarrollo
Se ejecuta: En tu navegador
Coste: Gratis · sin registro
Disponibilidad: Lista para usar

Banco de diseño FlexboxProcesamiento local

Funciona por completo en tu navegador

DirecciónEstablece el eje principal y su dirección.Ajustar líneaPermite líneas adicionales cuando los elementos no caben.Justificar contenidoDistribuye el espacio sobrante en el eje principal.Alinear elementosAlinea los elementos en el eje transversal dentro de cada línea.Alinear contenidoDistribuye las líneas en el eje transversal cuando el ajuste de línea crea varias líneas.Espacio (px)Establece el espacio entre elementos y líneas contiguos.

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 12px;
}
.item-1 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-2 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-3 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-4 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-5 { flex: 0 1 120px; order: 0; align-self: auto; }

Usa flexbox para una fila o columna. Usa CSS Grid cuando tanto las filas como las columnas necesiten pistas compartidas. Abrir generador de CSS Grid

Elemento seleccionado 1CrecerProporción relativa del espacio libre positivo.ReducirPeso relativo de reducción, multiplicado por el tamaño base.BaseTamaño inicial en el eje principal antes de crecer o reducirse.OrdenSolo cambia el orden visual; el orden de lectura y del teclado no cambia.Alinear elementoAnula la alineación del eje transversal del contenedor para este elemento.

Modelo de diseño flex

CSS Flexible Box Layout Module Level 1 del W3C: https://www.w3.org/TR/css-flexbox-1/ . El espacio libre se distribuye mediante los factores de crecimiento y reducción de flex a lo largo del eje principal.

Alineación y accesibilidad

Conceptos básicos de flexbox en MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox . El eje transversal es perpendicular al eje principal; el reordenamiento visual no cambia el orden del documento.

Cómo se usa

Define la dirección, el ajuste y la alineación del contenedor.
Haz clic en un elemento y cambia su tamaño y alineación individuales.
Añade o elimina elementos, revisa el diseño y copia el CSS generado.

Privacidad y límites

La configuración del diseño se procesa localmente en tu navegador.

Herramientas relacionadas

Preguntas frecuentes

¿Por qué align-content a veces no hace nada?

Distribuye las líneas flex. Para que tenga un efecto visible, se necesitan ajuste de línea, varias líneas y espacio libre en el eje transversal.

¿order cambia el orden para los lectores de pantalla?

No. Cambia el orden visual, mientras que el orden de lectura del documento y el orden del teclado permanecen sin cambios. Mantén un orden lógico en el documento.

¿Cuándo debería usar Grid?

Usa Grid cuando las filas y las columnas deban compartir tracks. Flexbox es útil para organizar elementos principalmente a lo largo de un solo eje.

Herramienta gratuita · se ejecuta en tu navegador · sin cuenta