Align content

It aligns multilined flexboxes when there is extra space in the cross-axis, similar to how justify-content aligns items within the main-axis.

Note This property has no effect when the flexbox has only a single line

Default styling
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
wrap%3Aaround
Spread wrapped axis at the top and bottom.
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
wrap%3Abetween
Spread wrapped axis where the first row is at the top and last at the bottom.
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
wrap%3Abottom
Align items to the bottom.
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
wrap%3Amiddle
Cross axis center items.
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
wrap%3Astretch
Stretch items to take up the remaining space of the main axis.
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
wrap%3Atop
Align items to the main axis top.
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Markup

Toggle example guides Toggle HTML markup 

<div pam-flex="wrap [modifier]" pam-space="p:2" pam-skin="bg:gray:100" pam-size="h:10">
    <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 mr:2">Item 3</div>
    <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 mr:2">Item 3</div>
</div>