Wrap

To control if flex items should be forced onto one line or can wrap onto multiple lines. Flex items are fit into one line by default.

Default styling
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
nowrap
Force items into one line. This is the default behavior.
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
wrap
Items wrap into another line when they no longer fit their container.
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
wrap%3Areverse
Change direction of wraped so that they run from right to left.
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Markup

Toggle example guides Toggle HTML markup 

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