Aura Wire

Livewire UI Kit

Layout

Component

Flex

Versatile flexbox container for positioning, aligning, and distributing elements across row or column axes.

Component Syntax

blade 
<x-aura::flex align="center" justify="between" gap="4">
    <x-aura::text size="sm">
        Start
    </x-aura::text>
    <x-aura::text size="sm">
        End
    </x-aura::text>
</x-aura::flex>

1. Alignment and Distribution

blade
Start Center End

2. Column Direction with Gap

blade

Profile Settings

Manage personal preferences and notification rules.

Component Props

Available properties and configurations for the flex layout component.

Prop Default Available Values

direction

row
row col row-reverse col-reverse

align

null
start center end baseline stretch

justify

start
start center end between around evenly

gap

null
1 2 3 4 6 8 10 12

wrap

false
true false

inline

false
true false

width

null
full auto fit

as

div
div section article nav main