Flexi elements let us work directly with familiar layout concepts while avoiding <div>s with crowded class names. See the Introduction for examples.

Element Reference Sheet

NOTE: Each element has a comprehensive list of CSS properties not mentioned here, including properties to aid in cross-browser compatibility.

Block elements

Tag Name

Description

<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%;

Flex elements

Tag Name

Description

<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 */