Flexbox
Flexbox en Nuvex UI se expone mediante clases utilitarias para direccion, wrap, alineacion y tamano de items. Usa esta pagina para combinar helpers con seguridad sin apoyarte en clases row y col de grid.
Uso
Previsualiza como se combinan los helpers de direccion, wrap, alineacion y gap en un mismo contenedor flex. Ajusta controles y copia el set de clases resultante.
Sintaxis de clases
Los helpers de flexbox se arman con clases de display, direccion, alineacion y espaciado. Comienza con d-flex o d-inline-flex y despues compone solo los modificadores que el layout necesite.
Display base
Usa d-flex para contenedores en bloque y d-inline-flex para contextos de flujo inline.
Direccion y wrap
Usa flex-row o flex-column, y activa flex-wrap solo cuando los items deban saltar de linea.
Alineacion por ejes
Usa justify-* para distribuir en eje principal y items-* para alinear en eje cruzado.
Par de espaciado
Usa gap-{n}, gap-x-{n} o gap-y-{n} para separar hijos sin overrides de margin custom.
Comportamiento por ejes
El eje principal y el eje cruzado cambian cuando cambia la direccion. Ten este mapeo en mente antes de combinar justify e items.
Direccion row
Con flex-row, justify-* controla flujo horizontal e items-* controla alineacion vertical.
Direccion column
Con flex-column, justify-* controla flujo vertical e items-* controla alineacion horizontal.
Direccion y wrapping
La direccion define el orden del flujo y el wrap define si los hijos quedan en una linea o se distribuyen en lineas adicionales.
Flujo en una linea
Usa flex-nowrap para barras de acciones compactas o grupos que deban mantenerse en una sola linea.
Flujo adaptativo
Usa flex-wrap para filtros, chips o controles repetidos que necesiten wrapping responsive.
Matriz de alineacion
Las combinaciones frecuentes son mas faciles de leer cuando se expresan como pares de clases.
Par centrado
justify-center + items-center centra contenido sobre ambos ejes.
Fila distribuida
justify-between + items-center separa acciones iniciales y finales manteniendo alineacion vertical.
Texto por baseline
items-baseline ayuda a alinear en una linea textos con tamanos distintos.
Helpers de tamano por item
Usa helpers a nivel de item para controlar crecimiento y encogimiento sin CSS por componente.
Ocupar espacio disponible
Usa flex-1 cuando un hijo deba absorber el espacio libre restante.
Preservar ancho intrinseco
Usa flex-none en controles que deban conservar tamano por contenido.
Grow y shrink explicitos
Usa flex-grow, flex-grow-0, flex-shrink y flex-shrink-0 para comportamiento preciso.
Ejemplos de implementacion
Estos snippets aplican helpers de flexbox directamente sobre contenedores neutros y grupos de acciones.
Franja de acciones
Distribuye clusters de acciones con un solo item flexible y alineacion consistente.
Grupo de controles con wrap
Permite wrapping de controles manteniendo espaciado consistente entre filas y columnas.
Area de trabajo dividida
Combina paneles fijos y fluidos con flex-none y flex-1 en un layout horizontal.
Notas del framework
Estas notas resumen comportamiento de helpers especifico de las utilidades Nuvex UI.
- Flexbox en Nuvex UI esta disenado para componer layout con clases pequenas y combinables.
- La estrategia recomendada es resolver layout con helpers primero y usar CSS custom solo en casos excepcionales.