Flex

The flex trait helps with building layouts by utilizing the css flexbox and the flex specs. It's also used to control component layouts such as Grid, Lists and Menus.

By default the flex trait is set to display: flex;. To lay out inline items and their children as flexboxes use the inline modifier.

Default styling
Item 1
Item 2
Item 3
inline
Set display value to inline-flex to lay out inline items as flexboxes.
Item 1
Item 2
Item 3
Markup

Toggle example guides Toggle HTML markup 

<div pam-flex="[modifier]" pam-space="p:2" pam-skin="bg:gray:100">
    <div pam-skin="bg:gray:300" pam-space="p:4 mr:2">Item 1</div>
    <div pam-skin="bg:gray:300" pam-space="p:4 mr:2">Item 2</div>
    <div pam-skin="bg:gray:300" pam-space="p:4">Item 3</div>
</div>