zvizvi/filament-flexbox

A Filament v4 component that provides advanced CSS Flexbox layout capabilities

0.0.2 2025-12-22 14:01 UTC

Requires

• php: ^8.2
• filament/filament: ^4.0
• spatie/laravel-package-tools: ^1.16

Requires (Dev)

• orchestra/testbench: ^9.0
• phpunit/phpunit: ^11.0

MIT

• zvizvi

• css
• layout
• laravel
• flexbox
• filament

README

A Filament v4 component that provides advanced CSS Flexbox layout capabilities, replacing the basic Group component with full flexbox control.

Installation

composer require zvizvi/filament-flexbox

The package CSS is registered automatically via Filament's asset manager. You do not need to import or compile it manually.

Usage

Note: You cannot call flex item methods like flexGrow() / flexShrink() on core Filament components (e.g. TextInput). Wrap them with FlexItem instead.

Note: This package provides spacing() for controlling the CSS gap. The gap() method name is reserved by Filament base components.

Basic Usage

use Zvizvi\FilamentFlexbox\Components\Flexbox;
use Zvizvi\FilamentFlexbox\Components\FlexItem;

Flexbox::make([
    FlexItem::make([TextInput::make('first_name')]),
    FlexItem::make([TextInput::make('last_name')]),
])

Item Flex Defaults

By default, this package does not apply any default values for flex-grow, flex-shrink, or flex-basis on flex items.

If you want the flex items to behave like flex: 1 1 auto by default, enable item defaults on the container:

Flexbox::make([
    // ...
])->applyItemFlexDefaults();

// Alias:
Flexbox::make([
    // ...
])->itemDefaults();

To explicitly disable it:

Flexbox::make([
    // ...
])->applyItemFlexDefaults(false);

Direction

// Horizontal (default)
Flexbox::make([...])->row()

// Vertical
Flexbox::make([...])->column()

// Or use direction() method
Flexbox::make([...])->direction('row-reverse')
Flexbox::make([...])->direction('column-reverse')

Wrap

Flexbox::make([...])->wrap()

Justify Content

Flexbox::make([...])->justify('start')    // justify-content: flex-start
Flexbox::make([...])->justify('end')      // justify-content: flex-end
Flexbox::make([...])->justify('center')   // justify-content: center
Flexbox::make([...])->justify('between')  // justify-content: space-between
Flexbox::make([...])->justify('around')   // justify-content: space-around
Flexbox::make([...])->justify('evenly')   // justify-content: space-evenly

Align Items

Flexbox::make([...])->align('start')      // align-items: flex-start
Flexbox::make([...])->align('end')        // align-items: flex-end
Flexbox::make([...])->align('center')     // align-items: center
Flexbox::make([...])->align('baseline')   // align-items: baseline
Flexbox::make([...])->align('stretch')    // align-items: stretch

Gap

Flexbox::make([...])->spacing('none')  // gap: 0
Flexbox::make([...])->spacing('xs')    // gap: 0.25rem
Flexbox::make([...])->spacing('sm')    // gap: 0.5rem
Flexbox::make([...])->spacing('md')    // gap: 1rem (default)
Flexbox::make([...])->spacing('lg')    // gap: 1.5rem
Flexbox::make([...])->spacing('xl')    // gap: 2rem

Responsive Breakpoint

// Stack vertically on mobile, horizontal from md breakpoint
Flexbox::make([...])->from('md')

Flex Child Properties

Use FlexItem to apply flex item properties to any Filament component:

use Zvizvi\FilamentFlexbox\Components\FlexItem;

FlexItem::make([
    TextInput::make('name'),
])->flexGrow(2)

FlexItem::make([
    TextInput::make('email'),
])->flexShrink(0)

FlexItem::make([
    TextInput::make('phone'),
])->flexBasis('200px')

FlexItem::make([
    TextInput::make('company'),
])->flex('1 0 240px')

FlexItem::make([
    TextInput::make('website'),
])->flex(2)

FlexItem::make([
    TextInput::make('zipcode'),
])->flex('240px')

// Responsive values (breakpoints: default, sm, md, lg, xl, 2xl)
FlexItem::make([
    TextInput::make('notes'),
])->flexGrow([
    'default' => 1,
    'md' => 2,
    'xl' => 3,
])

FlexItem::make([
    TextInput::make('sidebar'),
])->flex([
    'default' => '1 1 auto',
    'lg' => '0 0 320px',
])

FlexItem::make([
    TextInput::make('address'),
])->minWidth(240)->maxWidth('420px')

Complete Example

use Zvizvi\FilamentFlexbox\Components\Flexbox;
use Zvizvi\FilamentFlexbox\Components\FlexItem;

Flexbox::make([
    FlexItem::make([
        Section::make([
            TextInput::make('title'),
            Textarea::make('content'),
        ]),
    ])->flexGrow(2),

    FlexItem::make([
        Section::make([
            Toggle::make('is_published'),
            Toggle::make('is_featured'),
        ]),
    ])->flexShrink(0)->flexBasis('300px'),
])
->row()
->wrap()
->justify('between')
->align('start')
->spacing('lg')
->from('md')

License

MIT