Elements
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 |
---|---|
| Wraps your entire layout. Typically used only once as a top-level wrapper.
|
| Switch to a
|
Flex elements
Tag Name | Description |
---|---|
| Wraps content into a container the size of the viewport. Aligns items vertically and has
|
| 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. |
| A |
| A column that aligns items vertically (hence vbox). Expands to fill remaining space with:
|
| A row that aligns items horizontally (hence hbox). Wraps content to the next line when needed. Expands to fill remaining space with:
|
| Switch to a
|
| Basically a
|
| A generic "box item" that grows equally with other flex items in the parent:
|
| A generic full-width container with container-level breakpoints. Displays content vertically and is actually an Ember component which sets its tagName to 'container'.
|
Updated less than a minute ago