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 |
---|---|---|
| Shrinks the element to the size of its content |
|
| Causes the element to grow to available space |
|
| Children will be laid out horizontally |
|
| Children will be laid out vertically |
|
| Content will be wrapped to the next line if needed. Only applies if the element has |
|
| Content will never wrap to the next line. Only applies if the element has |
|
| Shorthand that maps to the CSS |
|
| Shorthand that maps to the CSS NOTE: |
|
| Shorthand that maps to the CSS |
|
| Shorthand that maps to the CSS |
|
| Hides the element |
|
| Makes the element visible if previously hidden |
|
Updated less than a minute ago