Flexbox

These classes can override a flexbox element's settings ad hoc.

Alignment

Flexbox is a utility that offers space distribution between items in an interface with powerful alignment capabilities.

<property>--<value>

Class	Property
`items--stretch`	`align-items: stretch`
`items--start`	`align-items: flex-start`
`items--center`	`align-items: center`
`items--end`	`align-items: flex-end`
`items--baseline`	`align-items: baseline`
`justify--start`	`justify-content: flex-start`
`justify--center`	`justify-content: center`
`justify--end`	`justify-content: flex-end`
`justify--between`	`justify-content: space-between`
`justify--around`	`justify-content: space-around`
`content--start`	`align-content: flex-start`
`content--center`	`align-content: center`
`content--end`	`align-content: flex-end`
`content--between`	`align-content: space-between`
`content--around`	`align-content: space-around`
`justify-self--auto`	`justify-self: auto`
`justify-self--start`	`justify-self: flex-start`
`justify-self--center`	`justify-self: center`
`justify-self--end`	`justify-self: flex-end`
`align-self--auto`	`align-self: auto`
`align-self--start`	`align-self: flex-start`
`align-self--center`	`align-self: center`
`align-self--end`	`align-self: flex-end`
`align-self--stretch`	`align-self: stretch`
`flex--middle`	`justify-content: center` `align-items: center` `text-align: center`

Specify how flex items are placed in the flex container

flex--<value>

Class	Property
`flex--row`	`flex-direction: row`
`flex--row-reverse`	`flex-direction: row-reverse`
`flex--col`	`flex-direction: column`
`flex--col-reverse`	`flex-direction: column-reverse`

Specify the flex grow factor of a flex item

flex--<value>

Specify the order used to lay out an item in its flex container

order--<order>@<bp>

Specify whether flex items are forced into a single line or can be wrapped onto multiple lines

flex--<value>