Dimension

Control how a flex item grows or shrinks to fit the space available. By default flex items don't shrink below their minimum content size. Set a min-width or min-height to change this behaviour.

Default styling
Item 1
Item 2
Item 3
1
flex item will grow and shrink, ignoring initial size.
Item 1
Item 2
Item 3
auto
flex item will grow and shrink realtive to initial size.
Item 1
Item 2
Item 3
initial
flex item will shrink but not grow.
Item 1
Item 2
Item 3
none
flex item will not grow or shrink.
Item 1
Item 2
Item 3
Markup

Toggle example guides Toggle HTML markup 

<div pam-flex="" 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-flex-dimension="[modifier]" 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>