Utilities
Flexbox
Generated from the registry, so this page can't drift from the compiler.
flex
Makes an element a flex container and optionally sets its direction.
Syntax
flex()
flex(direction)Accepted values
| Argument | Type | Values |
|---|---|---|
direction? | keyword | row col row-reverse col-reverse |
Examples and generated CSS
flex()
flex(row)
flex(col)
md:flex(row-reverse).flex\(\) {
display: flex;
}
.flex\(col\) {
display: flex;
flex-direction: column;
}
.flex\(row\) {
display: flex;
flex-direction: row;
}
@media (min-width: 768px) {
.md\:flex\(row-reverse\) {
display: flex;
flex-direction: row-reverse;
}
}Theme behavior
This utility uses fixed keywords and numbers, and reads nothing from the theme.
Responsive and state usage
md:flex()
hover:flex()
lg:focus:flex()flex-direction
Sets direction only, for changing direction at a breakpoint.
Syntax
flex-direction(value)Accepted values
| Argument | Type | Values |
|---|---|---|
value | keyword | row col row-reverse col-reverse |
Examples and generated CSS
flex-direction(col)
md:flex-direction(row).flex-direction\(col\) {
flex-direction: column;
}
@media (min-width: 768px) {
.md\:flex-direction\(row\) {
flex-direction: row;
}
}Theme behavior
This utility uses fixed keywords and numbers, and reads nothing from the theme.
Responsive and state usage
md:flex-direction(col)
hover:flex-direction(col)
lg:focus:flex-direction(col)flex-wrap
Controls whether flex items wrap.
Syntax
flex-wrap(value)Accepted values
| Argument | Type | Values |
|---|---|---|
value | keyword | wrap nowrap reverse |
Examples and generated CSS
flex-wrap(wrap)
flex-wrap(nowrap).flex-wrap\(nowrap\) {
flex-wrap: nowrap;
}
.flex-wrap\(wrap\) {
flex-wrap: wrap;
}Theme behavior
This utility uses fixed keywords and numbers, and reads nothing from the theme.
Responsive and state usage
md:flex-wrap(wrap)
hover:flex-wrap(wrap)
lg:focus:flex-wrap(wrap)align
Aligns items on the cross axis.
Syntax
align(value)
align[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
value | keyword | start center end stretch baseline |
Examples and generated CSS
align(center)
align(start)
align[last_baseline].align\(center\) {
align-items: center;
}
.align\(start\) {
align-items: flex-start;
}
.align\[last_baseline\] {
align-items: last baseline;
}Theme behavior
This utility uses fixed keywords and numbers, and reads nothing from the theme.
Responsive and state usage
md:align(center)
hover:align(center)
lg:focus:align(center)justify
Distributes items on the main axis.
Syntax
justify(value)
justify[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
value | keyword | start center end between around evenly |
Examples and generated CSS
justify(between)
justify(center).justify\(between\) {
justify-content: space-between;
}
.justify\(center\) {
justify-content: center;
}Theme behavior
This utility uses fixed keywords and numbers, and reads nothing from the theme.
Responsive and state usage
md:justify(between)
hover:justify(between)
lg:focus:justify(between)grow
Sets how much a flex item grows.
Syntax
grow(value)
grow[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
value | integer 0–9999 | See type |
Examples and generated CSS
grow(1)
grow(0).grow\(0\) {
flex-grow: 0;
}
.grow\(1\) {
flex-grow: 1;
}Theme behavior
This utility uses fixed keywords and numbers, and reads nothing from the theme.
Responsive and state usage
md:grow(1)
hover:grow(1)
lg:focus:grow(1)shrink
Sets how much a flex item shrinks.
Syntax
shrink(value)
shrink[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
value | integer 0–9999 | See type |
Examples and generated CSS
shrink(0)
shrink(1).shrink\(0\) {
flex-shrink: 0;
}
.shrink\(1\) {
flex-shrink: 1;
}Theme behavior
This utility uses fixed keywords and numbers, and reads nothing from the theme.
Responsive and state usage
md:shrink(0)
hover:shrink(0)
lg:focus:shrink(0)basis
Sets a flex item's initial main size.
Syntax
basis(value)
basis[raw-css]Accepted values
| Argument | Type | Values |
|---|---|---|
value | spacing token | 0 1 2 3 4 5 6 8 10 12 16 20 24 32 40 48 64 px |
| fraction, e.g. 1/2 | See type | |
| keyword | auto full content | |
| var(--name) | See type |
Examples and generated CSS
basis(1/2)
basis(64)
basis(auto)
basis[240px].basis\(1\/2\) {
flex-basis: 50%;
}
.basis\(64\) {
flex-basis: var(--croff-spacing-64);
}
.basis\(auto\) {
flex-basis: auto;
}
.basis\[240px\] {
flex-basis: 240px;
}Theme behavior
Reads tokens from spacing. A token compiles to its custom property, so changing it in your theme changes every use.
Responsive and state usage
md:basis(1/2)
hover:basis(1/2)
lg:focus:basis(1/2)