Flexbox
Flexbox in Nuvex UI is exposed through utility classes for layout direction, wrapping, alignment, and sizing. Use this page to combine helpers confidently without relying on grid row and col classes.
Usage
Preview how direction, wrapping, alignment, and gap helpers combine in a single flex container. Adjust controls and copy the resulting class set.
Class syntax
Flexbox helpers are assembled from display, direction, alignment, and spacing classes. Start with d-flex or d-inline-flex, then compose only the modifiers your layout needs.
Display base
Use d-flex for block-level containers and d-inline-flex for inline flow contexts.
Direction and wrap
Use flex-row or flex-column, then opt into flex-wrap only when items should move to new lines.
Axis alignment
Use justify-* for main axis distribution and items-* for cross-axis alignment.
Spacing pair
Use gap-{n}, gap-x-{n}, or gap-y-{n} to space children without custom margin overrides.
Axis behavior
Main and cross axis switch when direction changes. Keep this mapping in mind before combining justify and items helpers.
Row direction
With flex-row, justify-* controls horizontal flow and items-* controls vertical alignment.
Column direction
With flex-column, justify-* controls vertical flow and items-* controls horizontal alignment.
Direction and wrapping
Direction defines flow order while wrapping defines whether children keep one line or flow into additional lines.
Single line flow
Use flex-nowrap for compact toolbars or action groups that must stay on one line.
Adaptive flow
Use flex-wrap for chips, filter groups, or repeated controls that need responsive wrapping.
Alignment matrix
Common combinations become easier to read when expressed as class pairs.
Centered pair
justify-center + items-center keeps content centered across both axes.
Distributed row
justify-between + items-center separates leading and trailing actions while keeping vertical alignment.
Baseline text
items-baseline helps mixed text sizes align naturally in one line.
Item sizing helpers
Use item-level helpers to control growth and shrink behavior without writing per-component CSS.
Fill available space
Use flex-1 when one child should absorb remaining free space.
Preserve intrinsic width
Use flex-none for controls that should keep content-based sizing.
Explicit grow and shrink
Use flex-grow, flex-grow-0, flex-shrink, and flex-shrink-0 for precise behavior.
Implementation examples
These snippets apply flexbox helpers directly to neutral containers and action groups.
Action strip
Distribute action clusters with one flexible spacer item and consistent alignment.
Wrapped control group
Allow controls to wrap while preserving consistent spacing between rows and columns.
Split workspace
Combine fixed and fluid panels using flex-none and flex-1 in one horizontal layout.
Framework notes
These notes summarize helper behavior specific to Nuvex UI utility classes.
- Flexbox in Nuvex UI is designed to compose layout with small, combinable classes.
- The recommended strategy is to solve layout with helpers first and use custom CSS only in exceptional cases.