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

Barra de navegación CSS Flexbox: logotipo a la izquierda, enlaces a la derecha

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 ajuste preestablecido del generador Flexbox con el diseño clásico de la barra de navegación: justificar contenido establecido en espacio entre y alinear elementos configurado en el centro. Coloque un logotipo en el primer cuadro y una fila de enlaces de navegación en el último (o divida los enlaces en los cuadros del medio) y el contenedor flexbox los empujará hacia los extremos opuestos de la barra mientras mantiene todos los elementos alineados en el mismo centro vertical, sin importar qué tan alto sea el logotipo o el texto del enlace.

el espacio intermedio es lo que hace que esto funcione: fija el primer hijo al borde inicial y el último hijo al borde final, luego distribuye los hijos restantes de manera uniforme entre ellos, exactamente la forma del logotipo izquierdo y los enlaces derechos que usan casi todos los encabezados de sitios. align-items: center luego resuelve la alineación vertical que solía necesitar trucos de altura de línea o trucos de visualización de celdas de tabla.

Ajuste el recuento de niños para que coincida con su barra de navegación real (dos cuadros para un logotipo simple y una barra de CTA, más para el logotipo y varios enlaces) y observe cómo se adapta el diseño en vivo. Copie el bloque CSS una vez que coincida con su encabezado, o abra el espacio entre ajustes preestablecidos si desea ver esa propiedad en comparación con sus parientes cercanos.

🛡️
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.