⭐ 0
🔍
Texto Imagen PDF y Docs Audio Música Electrónica Tiempo Utilidades Validadores Esoterismo Juegos

justificar contenido: espacio entre explicado (CSS)

Cree visualmente un diseño de caja flexible CSS: dirección flexible, justificación de contenido, alineación de elementos, envoltura flexible y espacio en el contenedor, además de crecimiento flexible, reducción flexible y base flexible por niño, todo con una vista previa en vivo y CSS copiable.

Procesando... 0%

Resultado

Esta página abre el generador con justify-content configurado en espacio entre: el primer cuadro se ubica al ras del borde inicial del contenedor, el último cuadro se ubica al ras del borde final y el espacio sobrante se divide en espacios iguales entre los cuadros del medio, nunca antes del primero ni después del último.

Ése es el detalle que la gente confunde. space-around le da a cada caja un margen igual en ambos lados, por lo que los espacios entre las cajas terminan siendo dos veces más anchos que los espacios en los dos bordes exteriores (cada borde solo tiene un margen de caja, no dos). space-evenly va más allá y hace que cada espacio tenga el mismo tamaño, incluidos los dos bordes exteriores, el único de los tres donde el espacio parece perfectamente uniforme en todo su recorrido.

Cambie el menú desplegable de justificación de contenido entre los tres valores siguientes y observe cómo se reorganizan los mismos tres cuadros: es la forma más rápida de ver la diferencia en lugar de memorizarla. Copie el CSS del que coincida con el espacio que realmente desea.

🛡️
Ejecutado en el navegador

Tus archivos y datos nunca salen de este dispositivo. El procesamiento se realiza completamente sin conexión. 100% seguro.

Formatos y reglas aceptados

  • Controles de contenedor: dirección flexible, justificación de contenido, alineación de elementos, envoltura flexible y entrada de espacio en píxeles, aplicados en vivo a la vista previa.
  • Tres cuadros secundarios codificados por colores de forma predeterminada (agregue hasta ocho, elimine hasta dos), cada uno con sus propios campos flex-grow, flex-shrink y flex-basis.
  • Bloque CSS copiable con una regla .flex-container más una regla .flex-item-N por hijo que tiene propiedades flexibles no predeterminadas.

Beneficios clave

✓ Cada control de contenedor y flex-grow, flex-shrink y flex-basis de cada niño actualizan en vivo tres cuadros de vista previa numerados, para que pueda ver exactamente lo que hacen sus reglas de flexbox antes de tocar una hoja de estilo.
✓ El generador solo imprime reglas secundarias que realmente difieren de los valores predeterminados de CSS, por lo que el código copiado permanece breve y legible en lugar de volver a expresar flex-grow: 0 en cada cuadro.
✓ Las páginas preestablecidas resuelven los diseños que la gente busca por nombre: centrar un div, un logotipo, enlaces izquierdos, barra de navegación derecha y columnas flexibles de igual ancho; abra una y la herramienta ya estará configurada.

Casos de uso

  • • Obtenga el CSS exacto para centrar un div tanto horizontal como verticalmente observando cómo justificar contenido y alinear elementos funcionan en cuadros de vista previa en vivo.
  • • Cree un diseño de barra de navegación con logotipo izquierdo y enlaces derecho con espacio entre elementos y alineación de elementos: centro, luego copie el CSS del contenedor directamente en su componente de encabezado.
  • • Compare el espacio entre, el espacio alrededor y el espacio uniformemente uno al lado del otro en los mismos tres cuadros en lugar de adivinar cuál coincide con el espacio que desea.