PHPackages                             kingmaker/filament-flex-layout - 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. kingmaker/filament-flex-layout

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

kingmaker/filament-flex-layout
==============================

The Flex layout for the Forms and Infolists components in Filament.

1.0.1(1y ago)44.1k↑26.8%MITBladePHP ^8.1

Since Mar 21Pushed 10mo ago1 watchersCompare

[ Source](https://github.com/kingmaker-agm/filament-flex-layout)[ Packagist](https://packagist.org/packages/kingmaker/filament-flex-layout)[ RSS](/packages/kingmaker-filament-flex-layout/feed)WikiDiscussions master Synced 2d ago

READMEChangelogDependencies (2)Versions (3)Used By (0)

Caution

For Filament v4+, use the native `Flex` layout component.

Filament Flex Layout
====================

[](#filament-flex-layout)

[![Version](https://camo.githubusercontent.com/a2b7c777bd90393aefab125b9b30c40851fca6a7af29c033507be9a97bd0c4f3/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f56657273696f6e2d312e302d627269676874677265656e)](https://packagist.org/packages/kingmaker/filament-flex-layout)[![Packagist Downloads](https://camo.githubusercontent.com/9078af88e2daeaee0798b54fb5a9da14de0ba9cc97cd52dab4d2aa2e8ed05ea4/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f646d2f6b696e676d616b65722f66696c616d656e742d666c65782d6c61796f7574)](https://camo.githubusercontent.com/9078af88e2daeaee0798b54fb5a9da14de0ba9cc97cd52dab4d2aa2e8ed05ea4/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f646d2f6b696e676d616b65722f66696c616d656e742d666c65782d6c61796f7574)[![Filament 3.3+](https://camo.githubusercontent.com/002cec30db97c73a3127ea9cbeeb10b32fcb9bf041df7a71193f2e51d5850f24/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f46696c616d656e742d76332e332532422d666461653462)](https://filamentphp.com/)[![Tests](https://camo.githubusercontent.com/4179e87b8bb1dff3af3ac1152943de22ef151326bdb258f359515a9f6a200c88/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f54657374732d6d616e75616c25323070617373696e672d677265656e)](https://camo.githubusercontent.com/4179e87b8bb1dff3af3ac1152943de22ef151326bdb258f359515a9f6a200c88/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f54657374732d6d616e75616c25323070617373696e672d677265656e)[![License](https://camo.githubusercontent.com/d6bc2b26794002c24d023acaab01b6dbb953c57ab9cb80ba5b8aa2f2bd5de99a/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d4d49542d626c7565)](https://opensource.org/licenses/MIT)

This package provides the **Flexbox** layout for the forms & infolists components in your Filament admin panel.

Documentation
-------------

[](#documentation)

The `Split` layout Component in the *Forms* and *Infolists* of the Filament panel has been implemented using the **CSS Flexbox**, But unfortunatley it doesn't support important properties such as `justify-content` to manage the arrangement of its children.

The `Flex` layout Component solves this problem. The `Flex` is a sub-class of the `Split` component and provides additional APIs to align the **Horizontal Arrangement** (`justify-content`) and Flex **Gap** (`gap`).

Important

The Children of the `Flex` component must be chained with `->grow(false)` method for this to work.

#### Horizontal Arrangement

[](#horizontal-arrangement)

The Horizontal placement can be managed using `->horizontalArrangement()` method.

- `HorizontalArrangement::Start` - Justify content to the start of the container.
- `HorizontalArrangement::Center` - Justify content to the center of the container.
- `HorizontalArrangement::End` - Justify content to the end of the container.
- `HorizontalArrangement::Evenly` - Justify content with even spacing between them.
- `HorizontalArrangement::Between` - Justify content with space between them.
- `HorizontalArrangement::Around` - Justify content with space around them.

#### Flex Gap

[](#flex-gap)

The **Gap** between the children can be controlled using the `->gap()` method. The gap can be set to a specific value or a Tailwind CSS spacing utility class.

```
Flex::make([])
    ->gap(4) // will be translated to `gap-4` tailwind class
```

Requirements
------------

[](#requirements)

This package expects `filament/filament` package to be over `v3.3`.

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

[](#installation)

The package can be installed via Composer.

```
composer require kingmaker/filament-flex-layout
```

#### Theming

[](#theming)

Note

You need to use *custom theme* for the `Flex` component to work properly.

Add the plugin's views to your tailwind.config.js file.

```
export default{
  content: [
    '/kingmaker/filament-flex-layout/resources/views/**/*.blade.php'
  ]
}
```

Then, add few classes (`gap-*`) to your tailwind config file's `safelist`.

```
export default{
  content: [
    '/kingmaker/filament-flex-layout/resources/views/**/*.blade.php'
  ],
  safelist: [
    { pattern: /gap-/ },
  ]
}
```

Usage
-----

[](#usage)

Within your **Forms** and **Infolists** schema definition, You can use the `Flex` layout Component provided by this package.

```
use Kingmaker\FilamentFlexLayout\Enums\HorizontalArrangement;
use Kingmaker\FilamentFlexLayout\Forms\Flex;

Flex::make([
    Forms\Components\Toggle::make('user_like')
        ->grow(false) // offIcon('heroicon-o-heart')
        ->onColor('danger')
        ->offColor('gray'),
    Forms\Components\Toggle::make('user_read')
        ->grow(false) // offIcon('heroicon-s-book-open')
        ->onColor('success')
        ->offColor('gray'),
])
    ->horizontalArrangement(HorizontalArrangement::Evenly)
```

```
use Kingmaker\FilamentFlexLayout\Enums\HorizontalArrangement;
use Kingmaker\FilamentFlexLayout\Infolists\Flex;

Flex::make([])
    ->horizontalArrangement(HorizontalArrangement::Evenly)
    ->gap(12)
```

API Reference
-------------

[](#api-reference)

The `Flex` component is available for the **forms** and **infolists**

- `Kingmaker\FilamentFlexLayout\Forms\Flex` for forms layout.
- `Kingmaker\FilamentFlexLayout\Infolists\Flex` for infolists layout.

The `Flex` component extends the `Split` component and provides the following additional methods:

1. `gap(int|string|Closure $value)` - Set the gap between the children. The value can be a number or a Tailwind CSS spacing utility class.
2. `horizontalArrangement(HorizontalArrangement|string|Closure $value)` - Set the horizontal arrangement of the children.
    - The value can be one of the `HorizontalArrangement` enum values.
    - The value can be one of strings: `start`, `center`, `end`, `evenly`, `between`, `around`, `stretch`.
    - The value can be a closure that returns one of the above values.

#### Utility Methods

[](#utility-methods)

1. `horizontallyArrangeStart(Closure|bool $condition = true)` - Set the horizontal arrangement to `start` if the condition is true.
2. `horizontallyArrangeCenter(Closure|bool $condition = true)` - Set the horizontal arrangement to `center` if the condition is true.
3. `horizontallyArrangeEnd(Closure|bool $condition = true)` - Set the horizontal arrangement to `end` if the condition is true.
4. `horizontallyArrangeSpaceEvenly(Closure|bool $condition = true)` - Set the horizontal arrangement to `evenly` if the condition is true.
5. `horizontallyArrangeSpaceBetween(Closure|bool $condition = true)` - Set the horizontal arrangement to `between` if the condition is true.
6. `horizontallyArrangeSpaceAround(Closure|bool $condition = true)` - Set the horizontal arrangement to `around` if the condition is true.
7. `horizontallyArrangeStretch(Closure|bool $condition = true)` - Set the horizontal arrangement to `stretch` if the condition is true.
8. `horizontallyArrangeBaseline(Closure|bool $condition = true)` - Set the horizontal arrangement to `baseline` if the condition is true.

Contributing
------------

[](#contributing)

Contributions are always welcome!

License
-------

[](#license)

This Package was being published under [MIT](https://choosealicense.com/licenses/mit/) License.

###  Health Score

36

—

LowBetter than 79% of packages

Maintenance49

Moderate activity, may be stable

Popularity26

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity48

Maturing project, gaining track record

 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

468d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/a73fdca69f0fe759b6916d6db0cea5f124b3fc5e3199e0c472610388dda6d4e0?d=identicon)[kingmaker](/maintainers/kingmaker)

---

Top Contributors

[![kingmaker-agm](https://avatars.githubusercontent.com/u/23194965?v=4)](https://github.com/kingmaker-agm "kingmaker-agm (5 commits)")

---

Tags

flexlayoutFormssplitfilamentinfolistsflexbox

### Embed Badge

![Health badge](/badges/kingmaker-filament-flex-layout/health.svg)

```
[![Health](https://phpackages.com/badges/kingmaker-filament-flex-layout/health.svg)](https://phpackages.com/packages/kingmaker-filament-flex-layout)
```

###  Alternatives

[filament/filament

A collection of full-stack components for accelerated Laravel app development.

3829.6M3.6k](/packages/filament-filament)[codewithdennis/filament-select-tree

The multi-level select field enables you to make single selections from a predefined list of options that are organized into multiple levels or depths.

329530.5k29](/packages/codewithdennis-filament-select-tree)[filament/actions

Easily add beautiful action modals to any Livewire component.

1327.7M77](/packages/filament-actions)[rawilk/filament-password-input

Enhanced password input component for filament.

52263.4k14](/packages/rawilk-filament-password-input)[schmeits/filament-character-counter

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

34226.4k13](/packages/schmeits-filament-character-counter)[defstudio/filament-searchable-input

A searchable autocomplete input for Filament forms

3421.9k](/packages/defstudio-filament-searchable-input)

PHPackages © 2026

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