The flex layout supports a completely custom layout by utilizing the PatternFly spacer and breakpoint systems. Flex layouts are infinitely nestable and allow you to adjust spacing, direction, alignment, justification, wrapping, and width to fit your needs.
Elements
- Flex: The flex container, which contains all flex items.
- Flex item: An individual section of content to be placed in the flex container.
Usage
Flex layouts can be combined with other layouts to create versatile UIs.
For example, our dashboard pattern combines the grid layout with flex to improve the responsiveness of information. Similarly, our primary-detail pattern combines the stack layout with flex to ensure that icons and buttons are responsive to changes in screen size.
When to use the flex layout
Use the flex layout with content heavy UIs and when it is necessary to wrap UI elements.
When to use the flex layout vs the grid layout
Use the flex layout when a rigid grid is not necessary or wanted. If you need a more structured layout, consider using a the grid layout.
Variations
The flex layout is based on the CSS "flex" properties, which help determine how a flex item will grow or shrink to fit a containers available space. These properties allow for variation in the implementation and appearance of flex layouts.
Most of the flex layout variations are available at our standard breakpoints. In the future, we plan to apply these modifiers via ResizeObserver.
View source on GitHub
