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
`html <screen>`	Wraps your entire layout. Typically used only once as a top-level wrapper. `css min-height: 100vh; width: 100%;`
`html <fill block> </fill>`	Switch to a `display: block` layout from inside a `display: flex` parent. Aligns items vertically. `css height: 100% min-height: 100%; width: 100%;`

Flex elements

Tag Name	Description
`html <page>`	Wraps content into a container the size of the viewport. Aligns items vertically and has `css min-height: 100vh; width: 100vw; flex: 1 0 auto;`
`html <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.
`html <grid responsive> </grid>`	A `<grid>` that has container-level breakpoints.
`html <vbox>`	A column that aligns items vertically (hence vbox). Expands to fill remaining space with: `css flex: 1 0 auto`
`html <hbox>`	A row that aligns items horizontally (hence hbox). Wraps content to the next line when needed. Expands to fill remaining space with: `css flex: 1 0 auto`
`html <fill>`	Switch to a `display: flex` layout from inside a `display: block` parent. Basically a `<hbox>` that also has: `css min-width: 100%; min-height: 100%`
`html <centered>`	Basically a `<hbox>` with centering properties. Expands to fill remaining space with: `css flex: 1 0 auto;`
`html <box>`	A generic "box item" that grows equally with other flex items in the parent: `css flex: 1 0 0;`
`html <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'. css width: `100% /* Has no flex property */