<screen>

Wraps your entire layout. Typically used only once as a top-level wrapper.

min-height: 100vh;
width: 100%;

<fill block>
</fill>

Switch to a display: block layout from inside a display: flex parent. Aligns items vertically.

height: 100%
min-height: 100%;
width: 100%;

<page>

Wraps content into a container the size of the viewport. Aligns items vertically and has

min-height: 100vh;
width: 100vw;
flex: 1 0 auto;

<grid>

An alternative to rows and columns where items simply wrap to the next line. See Introduction#grids for an example. Aligns items horizontally and has no default flex value.

<grid responsive>
</grid>

A <grid> that has container-level breakpoints.

<vbox>

A column that aligns items vertically (hence vbox). Expands to fill remaining space with:

flex: 1 0 auto

<hbox>

A row that aligns items horizontally (hence hbox). Wraps content to the next line when needed. Expands to fill remaining space with:

flex: 1 0 auto

<fill>

Switch to a display: flex layout from inside a display: block parent. Basically a <hbox> that also has:

min-width: 100%;
min-height: 100%

<centered>

Basically a <hbox> with centering properties. Expands to fill remaining space with:

flex: 1 0 auto;

<box>

A generic "box item" that grows equally with other flex items in the parent:

flex: 1 0 0;

<container>

A generic full-width container with container-level breakpoints. Displays content vertically and is actually an Ember component which sets its tagName to 'container'.

width: `100%
/* Has no flex property */