Cross axis

Control the cross axis placement of flex items by using { bottom | middle | stretch | top } modifiers. Default behaviour is the same as stretch.

Default styling
Item 1
More height
than the others.
Item 2
Item 3
bottom
Align items to the bottom.
Item 1
More height
than the others.
Item 2
Item 3
middle
Center items along the cross axis. stretch -Items fill the height of their parent.
Item 1
More height
than the others.
Item 2
Item 3
top
Align items to the top.
Item 1
More height
than the others.
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">
        <div pam-typography="body-1">Item 1</div>
        <div pam-typography="body-2">More height</div>
        <div pam-typography="body-2">than the others.</div>
    </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 mr:2">Item 3</div>
</div>