Playground visual de Flexbox con preview en vivo y CSS generado
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
gap: 8px;
}También podrías necesitar
CSS Flexbox (Flexible Box Layout) es el sistema de layout más usado en desarrollo web moderno: permite alinear y distribuir espacio entre elementos en un contenedor de forma unidimensional (fila o columna). Aunque su especificación es relativamente compacta, la interacción entre las cinco propiedades principales — flex-direction, flex-wrap, justify-content, align-items y align-content — puede resultar confusa sin un playground visual. Esta herramienta te permite experimentar con todas las combinaciones en tiempo real: cambia una propiedad y ve el efecto al instante sobre los items de colores. El botón de añadir/quitar items te muestra cómo cambia el comportamiento con diferentes cantidades de elementos, especialmente útil para entender flex-wrap y align-content. El CSS generado es copiable con un clic y listo para pegar en tu hoja de estilos. Todo ocurre en el navegador — sin instalación, sin dependencias.
¿Cuál es la diferencia entre justify-content y align-items?
justify-content controla la distribución en el eje principal (el eje de flex-direction: horizontal si es row, vertical si es column). align-items controla la alineación en el eje cruzado (perpendicular al eje principal). Con flex-direction: row, justify-content mueve elementos horizontalmente y align-items los mueve verticalmente. Esta distinción se invierte completamente con flex-direction: column.
¿Cuándo usar align-content vs align-items?
align-items controla la alineación de una sola línea de items. align-content controla la distribución de múltiples líneas cuando flex-wrap está activo y hay más de una fila/columna. Si tu contenedor tiene flex-wrap: nowrap (todos los items en una línea), align-content no tiene efecto. Solo es relevante con flex-wrap: wrap o wrap-reverse y cuando el contenido ocupa menos espacio que el contenedor en el eje cruzado.
¿Qué diferencia hay entre flex-start y start en justify-content?
flex-start y flex-end son relativos al eje del flex container. start y end (sin el prefijo flex-) son relativos al modo de escritura del documento (writing-mode). En la mayoría de los casos con escritura izquierda-a-derecha (LTR), flex-start = start. La diferencia importa en layouts RTL (árabe, hebreo) o con vertical writing-mode. Para máxima compatibilidad con RTL, usa start/end; para layouts que no cambian dirección, flex-start/flex-end son más explícitos.
¿Para qué sirve flex-wrap: wrap-reverse?
wrap-reverse funciona como wrap (permite que los items se envuelvan en múltiples líneas) pero invierte el orden en el eje cruzado: las líneas de overflow van hacia arriba en lugar de hacia abajo (para flex-direction: row). Es útil en layouts donde quieres que los elementos overflow aparezcan 'arriba' del primer grupo de items, como en ciertos diseños de chat o feeds reverse-chronological.
¿El CSS generado necesita prefijos de vendor?
No. Flexbox tiene soporte completo sin prefijos en todos los navegadores modernos (Chrome 29+, Firefox 28+, Safari 9+, Edge). Los prefijos -webkit-flex y -ms-flexbox eran necesarios antes de 2016. Si necesitas soporte para navegadores muy antiguos, puedes añadir @supports para detectar Flexbox o usar un fallback con float/inline-block, pero para el desarrollo web actual no es necesario.