[ @sdxc/u/layout ]
justify-content
Sets justify-content, aliasing the short between/around/evenly forms to their space-* CSS keywords.
import { justify } from "@sdxc/u/layout";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.justify("between") | css({ justifyContent: "space-between" }) |
u.justify("center") | css({ justifyContent: "center" }) |
Examples
Basic example
Use justify("between") to spread items along the main axis with equal room between each one:
01
02
03
<div mix={[flex(), justify("between"), ...]}>
<div mix={[...]}>01</div>
<div mix={[...]}>02</div>
<div mix={[...]}>03</div>
</div>Start, center and end
Use justify("start"), justify("center") or justify("end") to pack items against that part of the main axis:
start
02
center
02
end
02
<div mix={[...]}>
<div mix={[flex(), gap(4), justify("start"), ...]}>
<div mix={[...]}>start</div>
<div mix={[...]}>02</div>
</div>
<div mix={[flex(), gap(4), justify("center"), ...]}>
<div mix={[...]}>center</div>
<div mix={[...]}>02</div>
</div>
<div mix={[flex(), gap(4), justify("end"), ...]}>
<div mix={[...]}>end</div>
<div mix={[...]}>02</div>
</div>
</div>Space around and evenly
Use justify("around") to give each item equal room on both sides, or justify("evenly") to make every gap the same, the ends included:
around
02
03
evenly
02
03
<div mix={[...]}>
<div mix={[flex(), justify("around"), ...]}>
<div mix={[...]}>around</div>
<div mix={[...]}>02</div>
<div mix={[...]}>03</div>
</div>
<div mix={[flex(), justify("evenly"), ...]}>
<div mix={[...]}>evenly</div>
<div mix={[...]}>02</div>
<div mix={[...]}>03</div>
</div>
</div>Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.justify("between"))Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.justify("between"))Signature
u.justify(value?: JustifyValue)