Editor visual de Flexbox

Funciones

• Una fila de botones por cada una de siete propiedades: display, flex-direction, flex-wrap, justify-content, align-items, align-content y el tamaño de los elementos
• Vista previa en vivo sobre una rejilla, para juzgar de un vistazo los efectos de posición
• Número de elementos (1–8) y separación (0–64px) ajustables
• «Por qué no se nota el cambio»: se razona con los valores actuales (align-content necesita varias líneas, space-* necesita espacio libre, baseline necesita líneas base distintas, ancho fijo con nowrap desborda)
• Las direcciones invertidas avisan de que solo cambian el orden visual: el tabulador y los lectores de pantalla siguen el orden del DOM
• Cada valor elegido muestra una línea de explicación bajo su fila
• Copia el CSS completo en dos bloques (contenedor y elementos) y el HTML correspondiente
• La vista previa y el código salen de las mismas declaraciones: lo que ves es lo que copias

Cómo se usa

1. Pulsa por las filas de botones y mira cómo cambia la vista previa
2. Ajusta el número de elementos y la separación para acercarte a tu propio caso
3. Comprueba si aparece un aviso de «por qué no se nota el cambio» bajo la vista previa
4. Copia el CSS y el HTML a tu página

Preguntas frecuentes

¿Cuál de los dos ejes controla justify-content y cuál align-items?

`justify-content` actúa sobre el eje principal y `align-items` sobre el eje transversal. El eje principal lo determina `flex-direction`: con `row` es horizontal (justify mueve a izquierda y derecha, align arriba y abajo), y con `column` pasa a vertical, intercambiando los dos papeles. Así que la respuesta a «cómo lo centro en los dos ejes» depende de la dirección: con el `row` predeterminado son `justify-content: center` y `align-items: center`, y con `column` esas mismas declaraciones significan lo contrario. Pulsa la fila de direction y verás el intercambio al momento.

¿Por qué align-content no hace nada?

Porque reparte el espacio entre las líneas, y con una sola línea no hay nada que repartir: solo actúa cuando `flex-wrap: wrap` ha producido de verdad varias líneas. Mientras el ajuste sea `nowrap`, la herramienta no lo incluye en el código generado (incluirlo induciría a error) y lo explica bajo la vista previa. Para verlo: pon wrap en `wrap`, elige elementos de ancho fijo y sube el número de elementos por encima de seis.

¿Por qué space-between se ve igual que flex-start?

Porque los valores `space-*` reparten el espacio libre, y sin espacio libre todos se quedan igual. La causa habitual es que los elementos llenan el contenedor, ya sea por un tamaño igual o fijo, ya porque el contenedor tiene justo la anchura necesaria. Cambia el tamaño a «Según contenido», usa menos elementos o ensancha el contenedor y la diferencia aparece.

¿Qué diferencia hay entre flex: 1 y flex: 1 1 auto?

`flex: 1` es una forma abreviada que se expande a `flex: 1 1 0%` (base cero), mientras que `flex: 1 1 auto` toma la anchura del contenido como base. La diferencia se ve cuando los contenidos no miden lo mismo: con base 0 los elementos reparten el contenedor a partes iguales sin importar el contenido; con base auto toman primero su anchura de contenido y luego comparten lo que sobra en proporción, así que el más largo acaba más ancho. Eso es justo la elección entre «Igual» y «Según contenido» de aquí: alterna y mira la anchura de los elementos 1 y 2.