Package org.patternfly.layout.flex

package org.patternfly.layout.flex

Provides the PatternFly flex layout for building custom layouts with full control over spacing, direction, alignment, justification, wrapping, and width.

The flex layout utilizes the PatternFly spacer and breakpoint systems to create completely custom layouts. It supports nesting flex containers, individual item spacing, responsive breakpoints, and various alignment and justification options.

Usage

A basic flex layout with items:

import static org.patternfly.layout.flex.Flex.flex;
import static org.patternfly.layout.flex.FlexItem.flexItem;

flex()
        .addItem(flexItem().text("Flex item"))
        .addItem(flexItem().text("Flex item"))
        .addItem(flexItem().text("Flex item"));

A flex layout with custom spacing and responsive direction:

import static org.patternfly.layout.flex.Flex.flex;
import static org.patternfly.layout.flex.FlexItem.flexItem;
import static org.patternfly.style.Breakpoint.default_;
import static org.patternfly.style.Breakpoint.lg;
import static org.patternfly.style.Breakpoints.breakpoints;

flex()
        .direction(breakpoints(default_, Direction.column, lg, Direction.row))
        .spaceItems(breakpoints(default_, SpaceItems.md))
        .addItem(flexItem().text("Item 1"))
        .addItem(flexItem().text("Item 2"))
        .addItem(flexItem().text("Item 3"));

See Also:

• Flex
• FlexItem
• Direction
• SpaceItems
• Spacer
• AlignItems
• JustifyContent
• Gap
• PatternFly Flex

Related Packages

Package	Description
org.patternfly.layout	PatternFly layouts provide structure and positioning for content on a page.

Class	Description
Align	Defines the alignment property values for a Flex layout.
AlignContent	Defines the align-content property values for a Flex layout.
AlignItems	Defines the align-items property values for a Flex layout.
AlignSelf	Defines the align-self property values for a Flex layout.
Direction	Defines the flex-direction property values for a Flex layout.
Display	Defines the display property values for a Flex layout.
Flex	The flex layout supports a completely custom layout by utilizing the PatternFly spacer and breakpoint systems.
FlexItem	An item within a Flex layout container.
FlexShorthand	Defines the flex shorthand property values for a Flex layout.
FlexWrap	Defines the flex-wrap property values for a Flex layout.
Gap	Defines the gap property values for a Flex layout.
JustifyContent	Defines the justify-content property values for a Flex layout.
SpaceItems	Defines the space-items property values for a Flex layout.
Spacer	Defines the spacer property values for a Flex layout.