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;