Generador de CSS Flexbox
Cambia las propiedades del contenedor y de cada elemento y mira al instante cómo se reparten. Es la forma más rápida de entender flexbox sin escribir código a ciegas: cuando el resultado te convenza, copia solo el CSS que has modificado.
Procesado 100% en tu navegador
Pulsa un elemento de la vista previa para editarlo.
Ctrl + Enter ejecutarCtrl + C copiar resultado
Cómo usar
- 1Ajusta dirección, ajuste de línea, justificación y alineación del contenedor.
- 2Elige cuántos elementos quieres ver en la vista previa.
- 3Pulsa un elemento para cambiar su grow, shrink, basis, align-self y orden.
- 4Copia el CSS generado.
Casos de uso
- Centrar un elemento en horizontal y en vertical.
- Montar una barra de navegación con enlaces repartidos.
- Crear una fila de tarjetas que pase a varias líneas en pantallas pequeñas.
- Aprender la diferencia entre justify-content y align-items.
Preguntas frecuentes
¿Cuál es la diferencia entre justify-content y align-items?
justify-content reparte los elementos a lo largo del eje principal (la fila, por defecto) y align-items los alinea en el eje transversal. Si cambias la dirección a columna, los ejes se intercambian.
¿Cómo centro un elemento con flexbox?
En el contenedor usa justify-content: center y align-items: center. El contenedor debe tener altura para que el centrado vertical se note.
¿Qué significa flex: 1 1 auto?
Son grow, shrink y basis: cuánto puede crecer el elemento, cuánto puede encogerse y su tamaño de partida antes de repartir el espacio sobrante.
¿Cuándo uso flexbox y cuándo grid?
Flexbox es ideal para organizar elementos en una sola dimensión, fila o columna. Para cuadrículas de filas y columnas a la vez, usa CSS Grid.