Attributes

Layout attributes are converted to classes at build time.

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

Property Descriptors

HTML

<box
  align="start|end|stretch|center|baseline"
  align-content="start|end|stretch|center|around|between"
  align-self="start|end|stretch|center|baseline"
  justify="start|end|center|around|between"
  fit|fill
  vertical|horizontal
  wrap|nowrap
  hidden|visible
>

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.

HTML

<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:

HTML

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

Attribute Reference Sheet

Attribute Name	Description	Relevant CSS
html fit	Shrinks the element to the size of its content	css flex: none;
html fill	Causes the element to grow to available space	css flex: 1 0 auto;
html horizontal	Children will be laid out horizontally	css flex-direction: row;
html vertical	Children will be laid out vertically	css 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: horizontal	css 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 element	css display: none;
html visible	Makes the element visible if previously hidden	css display: initial;