Overview of the Phoenix LiveView Layout Component
The Phoenix LiveView layout component component is customizable utility for building responsive UI structures using Tailwind CSS. It wraps flex and grid systems in a clean interface that allows you to control spacing, alignment, order, direction, and more.
Flex Component
The
flex
component provides a clean abstraction over Tailwindās flexbox utilities. Below is a breakdown of all available props with examples.
<.flex></.flex>
Grid Component
<.grid></.grid>
direction prop
Sets the direction of flex items inside the container (row or column).
<.flex direction="col"></.flex> <.flex direction="col"></.flex> <.flex direction="col"></.flex> <.flex direction="col"></.flex>
justify prop
Controls horizontal alignment of children inside the container.
<.flex justify="start"></.flex> <.flex justify="center"></.flex> <.flex justify="end"></.flex> <.flex justify="between"></.flex> <.flex justify="around"></.flex> <.flex justify="evenly"></.flex>
align prop
Controls vertical alignment of items along the cross axis.
<.flex align="start"></.flex> <.flex align="center"></.flex> <.flex align="end"></.flex> <.flex align="stretch"></.flex> <.flex align="baseline"></.flex>
gap prop
Sets the spacing between child elements using Tailwind's gap utilities.
<.flex gap="extra_small"></.flex> <.flex gap="small"></.flex> <.flex gap="medium"></.flex> <.flex gap="large"></.flex> <.grid gap="extra_large"></.grid>
wrap prop
Enables or disables flex wrapping when items overflow the container.
<.flex wrap="nowrap"></.flex> <.flex wrap="wrap"></.flex> <.flex wrap="wrap-reverse"></.flex>
grow prop
Allows a flex item to grow and fill remaining space.
<.flex grow="grow"></.flex> <.flex grow="none"></.flex>
shrink prop
Specifies whether a flex item can shrink if needed.
<.flex shrink="shrink"></.flex> <.flex shrink="none"></.flex>
basis prop
Sets the initial size of a flex item before remaining space is distributed.
<.flex basis="extra_small"></.flex> <.flex basis="small"></.flex> <.flex basis="medium"></.flex> <.flex basis="large"></.flex> <.flex basis="extra_large"></.flex>
order prop
Controls the visual order of flex items regardless of their source order in the DOM.
<.flex order="first"></.flex> <.grid order="last"></.grid> <.flex order="none"></.flex>
align self prop
Controlling how an individual flex or grid item is positioned along its container's cross axis.
<.flex align_self="auto"></.flex> <.flex align_self="start"></.flex> <.flex align_self="center"></.flex> <.flex align_self="end"></.flex> <.grid align_self="stretch"></.grid>
Grid cols prop
Sets the number of columns in the grid layout.
<.grid cols="one"></.grid> <.grid cols="two"></.grid> <.grid cols="three"></.grid> <.grid cols="four"></.grid> <.grid cols="five"></.grid> <.grid cols="six"></.grid> <.grid cols="seven"></.grid> <.grid cols="eight"></.grid> <.grid cols="nine"></.grid> <.grid cols="ten"></.grid> <.grid cols="eleven"></.grid> <.grid cols="twelve"></.grid> <.grid cols="none"></.grid>
rows prop
Defines the number of rows in the grid layout.
<.grid rows="one"></.grid> <.grid rows="two"></.grid> <.grid rows="three"></.grid> <.grid rows="four"></.grid> <.grid rows="five"></.grid> <.grid rows="six"></.grid> <.grid rows="none"></.grid>
auto cols prop
Sets the size of implicit columns (auto-generated by the browser).
<.grid auto_cols="auto"></.grid> <.grid auto_cols="min"></.grid> <.grid auto_cols="max"></.grid> <.grid auto_cols="fr"></.grid>
auto rows prop
Sets the size of implicit rows in the layout.
<.grid auto_rows="auto"></.grid> <.grid auto_rows="min"></.grid> <.grid auto_rows="max"></.grid> <.grid auto_rows="fr"></.grid>
auto flow prop
Controls the direction of auto-placed items in the grid (row or column).
<.grid auto_flow="row"></.grid> <.grid auto_flow="col"></.grid> <.grid auto_flow="row-dense"></.grid> <.grid auto_flow="col-dense"></.grid>
justify items prop
Controls how grid items align horizontally inside their cells.
<.grid justify_self="auto"></.grid> <.grid justify_self="start"></.grid> <.grid justify_self="end"></.grid> <.grid justify_self="center"></.grid> <.grid justify_self="stretch"></.grid>
align content prop
Defines how multiple rows align in the grid container.
<.grid align_content="start"></.grid> <.grid align_content="center"></.grid> <.grid align_content="end"></.grid> <.grid align_content="between"></.grid> <.grid align_content="around"></.grid> <.grid align_content="evenly"></.grid>
place content prop
Shorthand for aligning content both horizontally and vertically inside the grid.
<.grid place_content="start"></.grid> <.grid place_content="center"></.grid> <.grid place_content="end"></.grid> <.grid place_content="between"></.grid> <.grid place_content="around"></.grid> <.grid place_content="evenly"></.grid> <.grid place_content="stretch"></.grid>
place items prop
Shorthand to control alignment of individual items along both axes.
<.grid place_items="start"></.grid> <.grid place_items="end"></.grid> <.grid place_items="center"></.grid> <.grid place_items="stretch"></.grid>
place self prop
Controls alignment of a single item inside the grid.
<.grid place_self="auto"></.grid> <.grid place_self="start"></.grid> <.grid place_self="end"></.grid> <.grid place_self="center"></.grid> <.grid place_self="stretch"></.grid>