The Rack

Element 1

The Rack lets you create an element with a min-height value, you can use it to vertically center one of its child.

To define which element will be centered you just have to add the centered attribute (without value) to this element.

You can define a gap value that will be applied between non centered elements.

centered: an attribute you give to one of the children, it define which element will be centered
gap: the space between non centered elements
min-height: the minimum height of the Rack element
scroll: automatically change the min-height to a fixed height and the content will be scrollable if necesary

Examples

The simplest use of the Rack is to set a min-height and only one element inside. If you remove the centered attribute on its child, you will see that the element is not vertically centered anymore. Try to remove the centered attribute bellow.

Element 1

In this exemple, you can see how the other elements are displayed around the centered element.

Try adding a gap or changing the position of the center element to understand the rack behaviour.

Element 1

Element 2

Element 3

Element 4

Element 5

If you add the scroll attribute, the Rack will have a fixed height and will be scrollable.

Element 1

Element 2

Element 3

Element 4

Element 5