The Flexi Developer Hub

Welcome to the Flexi developer hub. You'll find comprehensive guides and documentation to help you start working with Flexi as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    

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

Updated less than a minute ago

Elements


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.