Flexi elements let us work directly with familiar layout concepts while avoiding
<div>s with crowded class names. See the Introduction for examples.
NOTE: Each element has a comprehensive list of CSS properties not mentioned here, including properties to aid in cross-browser compatibility.
Wraps your entire layout. Typically used only once as a top-level wrapper.
Switch to a
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 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
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