Flexbox & grid

The basics — .joy-flex, .joy-flex-col, .joy-flex-wrap, .joy-grid-2/3/4, .joy-gap-1…6, .joy-items-center, .joy-items-start, .joy-justify-center, .joy-justify-between, .joy-order-first/last — are on Utilities. This page has everything else.

Flex direction & wrap

Class	CSS
`.joy-flex-row`	flex-direction: row
`.joy-flex-row-reverse`	flex-direction: row-reverse
`.joy-flex-col-reverse`	flex-direction: column-reverse
`.joy-flex-nowrap`	flex-wrap: nowrap
`.joy-flex-wrap-reverse`	flex-wrap: wrap-reverse

Flex item sizing

flex-1

auto width

<div class="joy-flex joy-gap-3">
    <div class="joy-flex-1" style="background:rgba(127,127,127,.1);padding:12px;border-radius:8px;">flex-1</div>
    <div class="joy-flex-1" style="background:rgba(127,127,127,.1);padding:12px;border-radius:8px;">flex-1</div>
    <div style="background:rgba(127,127,127,.1);padding:12px;border-radius:8px;">auto width</div>
</div>

Class	CSS
`.joy-flex-1`	flex: 1 1 0% — grows/shrinks, ignores its content size
`.joy-flex-auto`	flex: 1 1 auto — grows/shrinks, starts from its content size
`.joy-flex-initial`	flex: 0 1 auto — shrinks but never grows
`.joy-flex-none`	flex: none — fixed size, ignores available space
`.joy-flex-grow` / `.joy-flex-grow-0`	flex-grow: 1 / 0
`.joy-flex-shrink` / `.joy-flex-shrink-0`	flex-shrink: 1 / 0
`.joy-basis-0/auto/full`	flex-basis

Order

.joy-order-first and .joy-order-last already exist. For anything in between:

Class	Value
`.joy-order-0`	0
`.joy-order-1`	1
`.joy-order-2`	2
`.joy-order-3`	3

Grid columns & rows

.joy-grid-2/3/4 from Utilities still work. .joy-grid-cols-* covers 1–6 and is what the rest of this section (span, start/end) pairs with — both set display: grid on their own.

<div class="joy-grid-cols-3 sm:joy-grid-cols-1 joy-gap-3">
    <div style="background:rgba(127,127,127,.1);padding:12px;border-radius:8px;">1</div>
    <div style="background:rgba(127,127,127,.1);padding:12px;border-radius:8px;">2</div>
    <div style="background:rgba(127,127,127,.1);padding:12px;border-radius:8px;">3</div>
</div>

Class	CSS
`.joy-grid-cols-1` … `.joy-grid-cols-6`	display: grid; grid-template-columns: repeat(N, 1fr)
`.joy-grid-rows-1` … `.joy-grid-rows-4`	grid-template-rows: repeat(N, 1fr)

Spanning & placement

col-span-2

<div class="joy-grid-cols-3 joy-gap-3">
    <div class="joy-col-span-2" style="background:rgba(127,127,127,.1);padding:12px;border-radius:8px;">col-span-2</div>
    <div style="background:rgba(127,127,127,.1);padding:12px;border-radius:8px;">1</div>
</div>

Class	CSS
`.joy-col-span-1` … `.joy-col-span-6`	grid-column: span N / span N
`.joy-col-span-full`	grid-column: 1 / -1
`.joy-col-start-1` … `.joy-col-start-4`	grid-column-start
`.joy-col-end-1` … `.joy-col-end-4`	grid-column-end
`.joy-row-span-1` … `.joy-row-span-3`, `.joy-row-span-full`	grid-row

Auto-flow & auto tracks

Class	CSS
`.joy-grid-flow-row/col/row-dense/col-dense`	grid-auto-flow
`.joy-auto-cols-auto/min/max/fr`	grid-auto-columns
`.joy-auto-rows-auto/min/max/fr`	grid-auto-rows

Gap

.joy-gap-1 through .joy-gap-6 are on Utilities.

Justify content, items, self

.joy-justify-center and .joy-justify-between already exist.

Class	CSS
`.joy-justify-start/end/around/evenly`	justify-content
`.joy-justify-items-start/center/end/stretch`	justify-items (grid)
`.joy-justify-self-auto/start/center/end/stretch`	justify-self (grid item)

Align content, items, self

.joy-items-center and .joy-items-start already exist.

Class	CSS
`.joy-items-end/baseline/stretch`	align-items
`.joy-content-start/center/end/between/around/evenly`	align-content
`.joy-self-auto/start/center/end/stretch`	align-self

Place (shorthand for align + justify together)

Class	CSS
`.joy-place-content-center/start/end/between/around/evenly/stretch`	place-content
`.joy-place-items-center/start/end/stretch`	place-items
`.joy-place-self-auto/center/start/end/stretch`	place-self