Attributes

Layout attributes are converted to classes at build time.

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

Property Descriptors

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

<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 Name	Description	Relevant CSS
`fit`	Shrinks the element to the size of its content	`flex: none;`
`fill`	Causes the element to grow to available space	`flex: 1 0 auto;`
`horizontal`	Children will be laid out horizontally	`flex-direction: row;`
`vertical`	Children will be laid out vertically	`flexi-direction: column;`
`wrap`	Content will be wrapped to the next line if needed. Only applies if the element has `flex-direction: horizontal`.	`flex-wrap: wrap;`
`nowrap`	Content will never wrap to the next line. Only applies if the element has `flex-direction: horizontal`	`flex-wrap: nowrap;`
`align="start" "end" "stretch" "center" "baseline"`	Shorthand that maps to the CSS `align-items` declaration.	`align-items: ...`
`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.	`align-content: ...`
`align-self="start" "end" "stretch" "center" "baseline"`	Shorthand that maps to the CSS `align-self` declaration.	`align-self: ...`
`justify="start" "end" "center" "between" "around"`	Shorthand that maps to the CSS `justify-content` declaration.	`justify-content: ...`
`hidden`	Hides the element	`display: none;`
`visible`	Makes the element visible if previously hidden	`display: initial;`