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: