PHPackages                             zvizvi/filament-flexbox - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. zvizvi/filament-flexbox

ActiveLibrary[Utility & Helpers](/categories/utility)

zvizvi/filament-flexbox
=======================

A Filament v4 component that provides advanced CSS Flexbox layout capabilities

0.0.2(4mo ago)050↓50%MITPHPPHP ^8.2CI passing

Since Dec 22Pushed 3mo agoCompare

[ Source](https://github.com/zvizvi/filament-flexbox)[ Packagist](https://packagist.org/packages/zvizvi/filament-flexbox)[ Docs](https://github.com/zvizvi/filament-flexbox)[ RSS](/packages/zvizvi-filament-flexbox/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (1)Dependencies (4)Versions (3)Used By (0)

Filament Flexbox
================

[](#filament-flexbox)

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

Installation
------------

[](#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
-----

[](#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

[](#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

[](#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

[](#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

[](#wrap)

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

### Justify Content

[](#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

[](#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

[](#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

[](#responsive-breakpoint)

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

### Flex Child Properties

[](#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

[](#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
-------

[](#license)

MIT

###  Health Score

35

—

LowBetter than 79% of packages

Maintenance79

Regular maintenance activity

Popularity11

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity38

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~0 days

Total

2

Last Release

141d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/4cf30ec634479d6db393e6e41682df54cf1e5756a4cafc171ef126ad8034f0d6?d=identicon)[zvizvi](/maintainers/zvizvi)

---

Top Contributors

[![zvizvi](https://avatars.githubusercontent.com/u/4354421?v=4)](https://github.com/zvizvi "zvizvi (10 commits)")

---

Tags

laravelcsslayoutfilamentflexbox

###  Code Quality

TestsPHPUnit

### Embed Badge

![Health badge](/badges/zvizvi-filament-flexbox/health.svg)

```
[![Health](https://phpackages.com/badges/zvizvi-filament-flexbox/health.svg)](https://phpackages.com/packages/zvizvi-filament-flexbox)
```

###  Alternatives

[pboivin/filament-peek

Full-screen page preview modal for Filament

253319.6k12](/packages/pboivin-filament-peek)[dotswan/filament-map-picker

Easily pick and retrieve geo-coordinates using a map-based interface in your Filament applications.

124139.3k2](/packages/dotswan-filament-map-picker)[creagia/filament-code-field

A Filamentphp input field to edit or view code data.

58289.3k3](/packages/creagia-filament-code-field)[jibaymcs/filament-tour

Bring the power of DriverJs to your Filament panels and start a tour !

12247.8k](/packages/jibaymcs-filament-tour)[aymanalhattami/filament-context-menu

context menu (right click menu) for filament

9838.0k](/packages/aymanalhattami-filament-context-menu)[schmeits/filament-character-counter

This is a Filament character counter TextField and Textarea form field for Filament v4 and v5

33184.7k6](/packages/schmeits-filament-character-counter)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)