Live demo — this example is server-driven; run the showcase locally for the interactive version.

Flex

A flexbox-based responsive layout. Direction, justification, alignment, gap, and wrap are all driven by PF modifier classes — no custom CSS needed for the common cases.

Examples

Basic

Default row direction with a medium gap. Items size to content.

Direction column

Pass <code class="ws-code">direction="column"</code> to stack vertically — emits <code class="ws-code">pf-m-column</code>.

Row 1

Row 2

Row 3

With gap

The <code class="ws-code">gap</code> parameter maps to PF's spacer tokens (xs / sm / md / lg / xl / 2xl / 3xl / 4xl).

Far left

Mid

Far right

Justify content

<code class="ws-code">justify="space-between"</code> pushes children to either edge of the container.

Left

Right

Nested

A flex container nested as a child of another flex container.

Flex item

Nested with items

Nested flex containers mixed with plain flex items at the same level.

Flex item

Spacing on parent

pf-m-space-items-2xl on the parent spaces every child.

Flex item

Spacing on children

Per-item pf-m-spacer-* modifiers space individual children.

Item - none

Item - xs

Item - sm

Item - md

Item - lg

Item - xl

Item - 2xl

Item - 3xl

Item - 4xl

Spacing on parent and children

Parent space-items with per-item spacer overrides.

Flex item

Flex item - md

Flex item

Row gap

pf-m-row-gap-* sets only the cross-row gap of a wrapping flex.

Flex item

Column gap

pf-m-column-gap-* sets only the inline gap between columns.

Flex item

Default layout

The bare pf-v6-l-flex default: row, wrap, no gap modifiers.

Flex item

Inline flex

pf-m-inline-flex renders the container inline with surrounding content.

Flex item

Grow

pf-m-grow on one item makes it absorb the free space.

Flex item

Flex 1

pf-m-flex-1 gives an item flex: 1.

Flex item

Flex 1 to 4

pf-m-flex-1 through pf-m-flex-4 distribute space proportionally.

Flex item

Nested columns

Column-direction containers nested inside a row container.

Flex item

Responsive direction

pf-m-column with pf-m-row-on-lg switches direction at the lg breakpoint.

Flex item

Because this text is long enough to wrap, this item's width will force the adjacent item to wrap. If content is likely to wrap, modifiers will need to be used to control width. Lorem ipsum dolor sit amet consectetur adipisicing elit. Est animi modi temporibus, alias qui obcaecati ullam dolor nam, nulla magni iste rem praesentium numquam provident amet ut nesciunt harum accusamus.

Flex item

To control the width of the flex item, set .pf-m-flex-1. Lorem ipsum dolor sit amet consectetur adipisicing elit. Est animi modi temporibus, alias qui obcaecati ullam dolor nam, nulla magni iste rem praesentium numquam provident amet ut nesciunt harum accusamus.

Flex item

Align right

pf-m-align-right pushes an item to the inline end.

Flex item

Align right on single item

One item aligned right of its siblings.

Flex item

Align right on multiple groups

pf-m-align-right on group starts splits items into right-aligned groups.

Flex item

Align self flex end

pf-m-align-self-flex-end on a column aligns it to the cross-axis end.

Flex item

Align self center

pf-m-align-self-center centers a column on the cross axis.

Flex item

Align self baseline

pf-m-align-self-baseline aligns a column to the text baseline.

Flex item

Align self stretch

pf-m-align-self-stretch stretches a column to fill the cross axis.

Flex item

Justify content flex end

pf-m-justify-content-flex-end packs items at the inline end.

Flex item

Justify content space between

pf-m-justify-content-space-between distributes items with equal gaps.

Flex item

Justify content flex start

pf-m-justify-content-flex-start packs a column set back to the start.

Flex item

Ordering

pf-m-order-* modifiers rearrange items independently of DOM order.

Set 1, Item A

Set 1, Item B

Set 1, Item C

Set 1, Item D

Set 2, Item A

Set 2, Item B

Set 2, Item C

Set 2, Item D

First and last ordering

pf-m-order-first and pf-m-order-last pin items to the ends.

Item A

Item B

Item C

Responsive first last ordering

First/last ordering that only applies from a breakpoint up.

Item A

Item B

Item C

Responsive ordering

Numeric order modifiers with responsive suffixes.

Set 1, Item A

Set 1, Item B

Set 1, Item C

Set 1, Item D

Set 2, Item A

Set 2, Item B

Set 2, Item C

Set 2, Item D

Documentation

Flex props

Parameters accepted by {#include layouts/primitives/flex ... /}.

* required
Name	Type	Description
* `id`	String	DOM id on the container.
`direction`	`row \| column`	Flex direction — emits `pf-m-{direction}`. Default is row.
`justify`	`start \| center \| end \| space-between \| space-around`	justify-content — emits `pf-m-justify-content-{justify}`.
`align`	`start \| center \| end \| baseline \| stretch`	align-items — emits `pf-m-align-items-{align}`.
`gap`	`none \| xs \| sm \| md \| lg \| xl \| 2xl \| 3xl \| 4xl`	CSS gap between items — emits `pf-m-gap-{gap}`.
`wrap`	boolean	`true` (default — wraps). Pass `false` to emit `pf-m-nowrap`.
slot `items`	Qute block	Flex children — wrap each in `pf-v6-l-flex__item` and add per-item modifiers (`pf-m-grow`, `pf-m-flex-N`, `pf-m-align-self-*`) as needed.

Usage

Reach for Flex when the layout is one row or one column. For two-dimensional layouts use Grid; for auto-filled card grids use Gallery.

Per-item modifiers. Flex doesn't bake per-child controls into the include — add pf-m-grow, pf-m-shrink, pf-m-flex-1 through pf-m-flex-4, and pf-m-align-self-* directly on each pf-v6-l-flex__item.

Edit flex.html on GitHub