[ @sdxc/u/layout ]
flex-direction
Sets flex-direction: row.
import { flexRow } from "@sdxc/u/layout";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.flexRow() | css({ flexDirection: "row" }) |
Examples
Basic example
Use flexRow() with flex() to lay flex items out horizontally, in the same direction as text:
01
02
03
<div mix={[flex(), flexRow(), gap(4)]}>
<div mix={[...]}>01</div>
<div mix={[...]}>02</div>
<div mix={[...]}>03</div>
</div>Switching direction by size
Start with flexCol() and wrap flexRow() in a container query with at() to lay items out in a row only once there is room:
01
02
03
01
02
03
<div mix={[...]}>
<div mix={[container("toolbar"), is(56)]}>
<div mix={[flex(), flexCol(), at("sm", "toolbar", flexRow()), gap(4)]}>
<div mix={[...]}>01</div>
<div mix={[...]}>02</div>
<div mix={[...]}>03</div>
</div>
</div>
<div mix={[container("toolbar"), is(120)]}>
<div mix={[flex(), flexCol(), at("sm", "toolbar", flexRow()), gap(4)]}>
<div mix={[...]}>01</div>
<div mix={[...]}>02</div>
<div mix={[...]}>03</div>
</div>
</div>
</div>Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.flexRow())Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.flexRow())Signature
u.flexRow()