Main axis

Control the main axis space and alignment of flex items by using { left | right | between | around } modifiers. Default behaviour is the sames as left.

Default styling
Item 1
Item 2
Item 3
around
Spread items evenly both by position and space.
Item 1
Item 2
Item 3
between
Spread items evenly by position across the axis.
Item 1
Item 2
Item 3
center
Align items at the center.
Item 1
Item 2
Item 3
left
Align items at the start.
Item 1
Item 2
Item 3
right
Align items at the end.
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>