### Stack

### Base Stack Examples

Metronic's Stack allows building an equal height flexbile blocks easily:
Item 1
Item 2
Item 3
Item 4
Item vertical and horizontal aligments done super easy:
Left aligment
Center aligment
Right aligment
Top aligment
Middle aligment
Bottom aligment
Enable any number of fixed and fluid height items:
Fixed width - 120px
Fluid width - 100%
Fluid width - 100%
Fixed width - 150px
Fluid width - 100%
Fixed width - 150px
Default stack comes with fluid width `width: 100%` . With inline stack option you can have `width:auto` stack:
Free content
Free content
Longer free content
Unlimited level of nesting supported:
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item

### Responsive Modes

You can set responsive mode to your stack by just enabling one of responsive mode with special classes `m-stack--general` , `m-stack--desktop` , `m-stack--tablet` , `m-stack--desktop-and-tablet` , `m-stack--mobile` , `m-stack--tablet-and-mobile` . When `m-stack--general` mode used the stack mode will remain but with other modes, for example with `m-stack--tablet` the stack mode will be activate within the device width and outside the device with the stack will be have just normal block tag.
`m-stack--general:`
Top
Middle
Bottom
`m-stack--desktop:`
Top
Middle
Bottom
`m-stack--tablet:`
Top
Middle
Bottom
`m-stack--mobile:`
Top
Middle
Bottom

### Horizontal Stack Examples

Metronic's Stack allows building an equal height flexbile blocks easily:
Item 1
Item 2
Item 3
Item 4
Item vertical and horizontal aligments done super easy:
Left aligment
Center aligment
Right aligment
Enable any number of fixed and fluid width items:
Fixed height - 100px
Fluid height - 100%
Fixed height - 100px
Nested horizontal and vertical stacks:
Item
Item
Item
Item
Item
Item