Flex

Arranges child components side by side on a single horizontal (flexbox) axis, stacking vertically on small screens. Use it when you want a row of controls or panels that grow to share the space, rather than a fixed column grid.

Not to be confused with the table SplitColumn, which splits space within a single table cell.

use NyonCode\WireCore\Foundation\Schema\Flex;

Usage

Flex::make()->schema([
    TextInput::make('first_name'),
    TextInput::make('last_name'),
])

By default children grow to share the row evenly and the row turns horizontal at the md breakpoint, stacking vertically below it.

Controlling the Layout

Flex::make()
    ->from('lg')          // go horizontal at the lg breakpoint instead of md
    ->justify('between')  // distribute children along the main axis
    ->align('center')     // cross-axis alignment
    ->gap(6)              // spacing between children (Tailwind gap scale 0–12)
    ->grow(false)         // keep natural widths instead of filling the row
    ->wrap()              // allow children to wrap onto multiple lines
    ->schema([...])

Methods

Related Docs

• Grid
• Section