StackLayout Test

This is a .stackContent component.
.stackContent components must always wrap content.
They reset the letter-spacing:-0.65em and the font-family:'Courier New' properties which are used to deal with the white-space between inline-block nodes.
They are display:block and therefore occupy the full width of their parent.
You can apply .stackContent to any element. This componenent is a <ul>
You can apply global margins, borders and padding to .stackContent components. On this page I have applied global margin:10px; border:10px dashed #ddd; padding:10px

The next group are .stackAuto components, which have width:auto applied to them. They automatically form new rows just like text. In fact all .stack* components will form new rows if they become too wide for their parent. This becomes very useful for cross device complatibility:

.stackAuto .stackContent

The next three .stackAuto components have vertical-align:middle applied to them:

The rest of the available .stack* components are demonstrated below:

.stack1of2 .stackContent

.stack1of3 .stackContent

.stack2of3 .stackContent

.stack1of4 .stackContent

.stack1of2 .stackContent

.stack1of4 .stackContent

.stack3of4 .stackContent

.stack1of5 .stackContent

.stack4of5 .stackContent

.stack2of5 .stackContent

.stack3of5 .stackContent

Just to prove the stacks are infinitely nestable i've nested the markup from above into smaller divisions:

This is a .stackContent component.
.stackContent components must always wrap content.
They reset the letter-spacing:-0.65em and the font-family:'Courier New' properties which are used to deal with the white-space between inline-block nodes.
They are display:block and therefore occupy the full width of their parent.
You can apply .stackContent to any element. This componenent is a <ul>
You can apply global margins, borders and padding to .stackContent components. On this page I have applied global margin:10px; border:10px dashed #ddd; padding:10px

The next group are .stackAuto components, which have width:auto applied to them. They automatically form new rows just like text:

.stackAuto .stackContent

The next three .stackAuto components have vertical-align:middle applied to them:

The rest of the available .stack* components are demonstrated below:

.stack1of2 .stackContent

.stack1of3 .stackContent

.stack2of3 .stackContent

.stack1of4 .stackContent

.stack1of2 .stackContent

.stack1of4 .stackContent

.stack3of4 .stackContent

.stack1of5 .stackContent

.stack4of5 .stackContent

.stack2of5 .stackContent

.stack3of5 .stackContent

This is a .stackContent component.
.stackContent components must always wrap content.
They reset the letter-spacing:-0.65em and the font-family:'Courier New' properties which are used to deal with the white-space between inline-block nodes.
They are display:block and therefore occupy the full width of their parent.
You can apply .stackContent to any element. This componenent is a <ul>
You can apply global margins, borders and padding to .stackContent components. On this page I have applied global margin:10px; border:10px dashed #ddd; padding:10px

The next group are .stackAuto components, which have width:auto applied to them. They automatically form new rows just like text:

.stackAuto .stackContent

The next three .stackAuto components have vertical-align:middle applied to them:

The rest of the available .stack* components are demonstrated below:

.stack1of2 .stackContent

.stack1of3 .stackContent

.stack2of3 .stackContent

.stack1of4 .stackContent

.stack1of2 .stackContent

.stack1of4 .stackContent

.stack3of4 .stackContent

.stack1of5 .stackContent

.stack4of5 .stackContent

.stack2of5 .stackContent

.stack3of5 .stackContent

This is a .stackContent component.
.stackContent components must always wrap content.
They reset the letter-spacing:-0.65em and the font-family:'Courier New' properties which are used to deal with the white-space between inline-block nodes.
They are display:block and therefore occupy the full width of their parent.
You can apply .stackContent to any element. This componenent is a <ul>
You can apply global margins, borders and padding to .stackContent components. On this page I have applied global margin:10px; border:10px dashed #ddd; padding:10px

The next group are .stackAuto components, which have width:auto applied to them. They automatically form new rows just like text:

.stackAuto .stackContent

The next three .stackAuto components have vertical-align:middle applied to them:

The rest of the available .stack* components are demonstrated below:

.stack1of2 .stackContent

.stack1of3 .stackContent

.stack2of3 .stackContent

.stack1of4 .stackContent

.stack1of2 .stackContent

.stack1of4 .stackContent

.stack3of4 .stackContent

.stack1of5 .stackContent

.stack4of5 .stackContent

.stack2of5 .stackContent

.stack3of5 .stackContent