Layout attributes are converted to classes at build time.

Layout attributes come in two forms: property descriptors and breakpoint attributes.

Property Descriptors


Breakpoint Attributes

We can add breakpoint aware layout properties and columns for each breakpoint-prefix defined in config/flexi.js. The default breakpoints are sm, md, lg, and xl. Breakpoints can be customized or added.

The following specifies that this box is hidden for the breakpoint prefixed xs, 6 columns for sm, 4 for md and so on. The default columns-per-row is 12.

<box xs="hidden" sm="6 visible" md="4" lg="3"></box>

Attributes applied to a breakpoint will apply to all larger breakpoints unless overridden by a similar attribute in a larger breakpoint; note above how hidden is overridden by visible.

Property descriptors can also be used in breakpoints. For complex property descriptors, like align="...", simply omit the quotes from the value:

<box align="center" md="10 align=start" lg="6 align=end"></box>

Attribute Reference Sheet

Attribute NameDescriptionRelevant CSS
html fit Shrinks the element to the size of its contentcss flex: none;
html fill Causes the element to grow to available spacecss flex: 1 0 auto;
html horizontal Children will be laid out horizontallycss flex-direction: row;
html vertical Children will be laid out verticallycss flexi-direction: column;
html wrap Content will be wrapped to the next line if needed. Only applies if the element has flex-direction: horizontal.css flex-wrap: wrap;
html nowrap Content will never wrap to the next line. Only applies if the element has flex-direction: horizontalcss flex-wrap: nowrap;
html align="start" "end" "stretch" "center" "baseline" Shorthand that maps to the CSS align-items declaration.css align-items: ...
html align-content="start" "end" "stretch" "center" "between" "around" Shorthand that maps to the CSS align-content declaration.

NOTE: align-content is weird; unless you have a specific need for align-content, you probably want align-items.
css align-content: ...
html align-self="start" "end" "stretch" "center" "baseline" Shorthand that maps to the CSS align-self declaration.css align-self: ...
html justify="start" "end" "center" "between" "around" Shorthand that maps to the CSS justify-content declaration.css justify-content: ...
html hidden Hides the elementcss display: none;
html visible Makes the element visible if previously hiddencss display: initial;