Pages are now available as full-screen example templates that showcase real-world use cases and best practices for composing interfaces with the aFP Design System.
The Flank utility in the aFP Design System helps you create flexible two-part layouts where one side “flanks” the other. It’s ideal for patterns like navigation bars, headers with actions, or layouts where one element takes up remaining space beside another.
By default, a flank container uses display: flex with wrapping enabled, a medium gap, and automatic alignment along the cross axis.
Flank can be combined with alignment, gap, and layout utilities for more control. For example, you can use alignment classes from the aFP Design System to adjust vertical alignment or modify spacing with additional gap utilities.
By default, the first element inside a afp-flank container acts as the flanking item. You can control which side flanks the content by adding the :start or :end modifier to the afp-flank class.
The width of the flank adjusts automatically based on its content, but you can define a specific size with the -afp-flank-size variable. When wrapping occurs, the flank expands to match the container’s full inline width.
The primary content area automatically occupies any remaining horizontal space within the container. By default, items will wrap once the main content becomes narrower than 50% of the container. You can adjust this threshold using the --afp-flank-content-percentage variable.