The flex layout is based on the CSS Flex properties where the layout determines how a flex item will grow or shrink to fit the space available in its container. By default, a flex layout uses the spacing system to space children along the main axis and gap spacing to space any wrapping children along the cross axis, flex-wrap is set to wrap, and align-items is set to baseline. The flex layout is infinitely nestable and can be nested to group items within.

The flex layout provides two ways of spacing its direct children.

• Spacing system
  • The spacing system applies a margin between the flex layout's direct children to create space between items along the main axis only. The benefit of the spacing system is that it allows for variable spacing between direct children. Use the spacing system when individual flex items along the main axis require a different spacer than sibling items.
• Gap spacing
  • Gap spacing uses flex gap to space the flex layout's direct children, and can be applied to space rows (row-gap), columns (column-gap), or both (gap). The benefit of gap spacing is that item wrapping is improved and improved item spacing that works better with CSS flex's logical layout properties. E.g., spacing in RTL layouts that rely on logical properties is improved. Use the gap system when all direct children should use the same spacer for rows, columns, or both.
  • Note using gap along the main axis will override any other spacing applied using the spacing system.

Breakpoints -on-sm, -on-md, -on-lg, -on-xl, and -on-2xl are provided.

• Use when content dictates layout and elements wrap when necessary.
• Use when a rigid grid is not necessary/wanted.

• It contains multiple css declarations and does not use the !important tag.
• It does not require wrapping elements in columns or rows.
• It breaks the dependency upon adding utility classes to each child.
• It can be applied to container elements or components.

The CSS approach, by keeping specificity low on base class properties and resetting css variable values at higher specificities, allows any spacer property to be overwritten with a single selector (specificity of 10 or greater).

Ordering - Ordering can be applied to nested .pf-v5-l-flex and .pf-v5-l-flex__items. Spacing may need to be managed based on how items are ordered. Because order could apply to an innumerable number of elements, order is set inline as --pf-v5-l-flex--item--Order{-on-[breakpoint]}: {order}.