Display & Flex Utilities

Display types, visibility, and the full flexbox utility set.

Display Types

d-block (fills its line) d-inline-block d-inline

d-flexchild

d-inline-flex •

123

d-none (hidden)

<div class="lp-space-y-2">
    <span class="lp-demo-box lp-p-2 lp-d-block">d-block (fills its line)</span>
    <span class="lp-demo-box lp-p-2 lp-d-inline-block">d-inline-block</span>
    <span class="lp-demo-box lp-p-2 lp-d-inline">d-inline</span>
    <div class="lp-demo-box lp-p-2 lp-d-flex lp-gap-2"><span>d-flex</span><span>child</span></div>
    <span class="lp-demo-box lp-p-2 lp-d-inline-flex lp-gap-2">d-inline-flex <span>•</span></span>
    <div class="lp-demo-box lp-p-2 lp-d-grid lp-grid-cols-3 lp-gap-2"><span>1</span><span>2</span><span>3</span></div>
    <span class="lp-demo-box lp-p-2 lp-d-none">d-none (hidden)</span>
</div>

Visibility

visible invisible after invisible

The invisible box still reserves layout space (unlike d-none which removes it).

<div class="lp-d-flex lp-gap-3 lp-flex-wrap">
    <span class="lp-demo-box lp-demo-box--pill lp-visible">visible</span>
    <span class="lp-demo-box lp-demo-box--pill lp-invisible">invisible</span>
    <span class="lp-demo-box lp-demo-box--pill">after invisible</span>
</div>
<p class="lp-text-xs lp-text-muted lp-mt-2">The invisible box still reserves layout space (unlike d-none which removes it).</p>

Flex Direction

flex-row (default)

123

flex-row-reverse

123

flex-col

123

<p class="lp-text-xs lp-text-muted lp-mb-1">flex-row (default)</p>
<div class="lp-d-flex lp-flex-row lp-gap-2 lp-mb-3"><span class="lp-demo-box lp-demo-box--pill">1</span><span class="lp-demo-box lp-demo-box--pill">2</span><span class="lp-demo-box lp-demo-box--pill">3</span></div>
<p class="lp-text-xs lp-text-muted lp-mb-1">flex-row-reverse</p>
<div class="lp-d-flex lp-flex-row-reverse lp-gap-2 lp-mb-3"><span class="lp-demo-box lp-demo-box--pill">1</span><span class="lp-demo-box lp-demo-box--pill">2</span><span class="lp-demo-box lp-demo-box--pill">3</span></div>
<p class="lp-text-xs lp-text-muted lp-mb-1">flex-col</p>
<div class="lp-d-flex lp-flex-col lp-gap-2 lp-items-start"><span class="lp-demo-box lp-demo-box--pill">1</span><span class="lp-demo-box lp-demo-box--pill">2</span><span class="lp-demo-box lp-demo-box--pill">3</span></div>

Justify Content

justify-start

justify-center

justify-end

justify-between

ABC

justify-around

ABC

justify-evenly

ABC

<p class="lp-text-xs lp-text-muted lp-mb-1">justify-start</p>
<div class="lp-d-flex lp-justify-start lp-demo-frame lp-mb-2"><span class="lp-demo-box lp-demo-box--pill">A</span><span class="lp-demo-box lp-demo-box--pill">B</span></div>
<p class="lp-text-xs lp-text-muted lp-mb-1">justify-center</p>
<div class="lp-d-flex lp-justify-center lp-demo-frame lp-mb-2"><span class="lp-demo-box lp-demo-box--pill">A</span><span class="lp-demo-box lp-demo-box--pill">B</span></div>
<p class="lp-text-xs lp-text-muted lp-mb-1">justify-end</p>
<div class="lp-d-flex lp-justify-end lp-demo-frame lp-mb-2"><span class="lp-demo-box lp-demo-box--pill">A</span><span class="lp-demo-box lp-demo-box--pill">B</span></div>
<p class="lp-text-xs lp-text-muted lp-mb-1">justify-between</p>
<div class="lp-d-flex lp-justify-between lp-demo-frame lp-mb-2"><span class="lp-demo-box lp-demo-box--pill">A</span><span class="lp-demo-box lp-demo-box--pill">B</span><span class="lp-demo-box lp-demo-box--pill">C</span></div>
<p class="lp-text-xs lp-text-muted lp-mb-1">justify-around</p>
<div class="lp-d-flex lp-justify-around lp-demo-frame lp-mb-2"><span class="lp-demo-box lp-demo-box--pill">A</span><span class="lp-demo-box lp-demo-box--pill">B</span><span class="lp-demo-box lp-demo-box--pill">C</span></div>
<p class="lp-text-xs lp-text-muted lp-mb-1">justify-evenly</p>
<div class="lp-d-flex lp-justify-evenly lp-demo-frame"><span class="lp-demo-box lp-demo-box--pill">A</span><span class="lp-demo-box lp-demo-box--pill">B</span><span class="lp-demo-box lp-demo-box--pill">C</span></div>

Align Items

items-start

ABC

items-center

ABC

items-end

ABC

<p class="lp-text-xs lp-text-muted lp-mb-1">items-start</p>
<div class="lp-d-flex lp-items-start lp-gap-2 lp-demo-frame lp-hf-24 lp-mb-2"><span class="lp-demo-box lp-demo-box--pill lp-hf-8">A</span><span class="lp-demo-box lp-demo-box--pill lp-hf-12">B</span><span class="lp-demo-box lp-demo-box--pill lp-hf-16">C</span></div>
<p class="lp-text-xs lp-text-muted lp-mb-1">items-center</p>
<div class="lp-d-flex lp-items-center lp-gap-2 lp-demo-frame lp-hf-24 lp-mb-2"><span class="lp-demo-box lp-demo-box--pill lp-hf-8">A</span><span class="lp-demo-box lp-demo-box--pill lp-hf-12">B</span><span class="lp-demo-box lp-demo-box--pill lp-hf-16">C</span></div>
<p class="lp-text-xs lp-text-muted lp-mb-1">items-end</p>
<div class="lp-d-flex lp-items-end lp-gap-2 lp-demo-frame lp-hf-24"><span class="lp-demo-box lp-demo-box--pill lp-hf-8">A</span><span class="lp-demo-box lp-demo-box--pill lp-hf-12">B</span><span class="lp-demo-box lp-demo-box--pill lp-hf-16">C</span></div>

Flex Grow / Shrink

fixed flex-1 (fills) fixed

1 1 1

<div class="lp-d-flex lp-gap-2 lp-demo-frame lp-mb-3">
    <span class="lp-demo-box lp-demo-box--pill">fixed</span>
    <span class="lp-demo-box lp-demo-box--pill lp-flex-1">flex-1 (fills)</span>
    <span class="lp-demo-box lp-demo-box--pill">fixed</span>
</div>
<div class="lp-d-flex lp-gap-2 lp-demo-frame">
    <span class="lp-demo-box lp-demo-box--pill lp-flex-1">1</span>
    <span class="lp-demo-box lp-demo-box--pill lp-flex-1">1</span>
    <span class="lp-demo-box lp-demo-box--pill lp-flex-1">1</span>
</div>

Flex Wrap

1 2 3 4 5 6

<div class="lp-d-flex lp-flex-wrap lp-gap-2 lp-demo-frame">
    <span class="lp-demo-box lp-demo-box--pill lp-wf-32">1</span>
    <span class="lp-demo-box lp-demo-box--pill lp-wf-32">2</span>
    <span class="lp-demo-box lp-demo-box--pill lp-wf-32">3</span>
    <span class="lp-demo-box lp-demo-box--pill lp-wf-32">4</span>
    <span class="lp-demo-box lp-demo-box--pill lp-wf-32">5</span>
    <span class="lp-demo-box lp-demo-box--pill lp-wf-32">6</span>
</div>

Align Content (multi-line)

content-start

12345

content-center

12345

content-between

12345

<p class="lp-text-xs lp-text-muted lp-mb-1">content-start</p>
<div class="lp-d-flex lp-flex-wrap lp-content-start lp-gap-2 lp-demo-frame lp-hf-32 lp-mb-3">
    <span class="lp-demo-box lp-demo-box--pill lp-wf-20">1</span><span class="lp-demo-box lp-demo-box--pill lp-wf-20">2</span><span class="lp-demo-box lp-demo-box--pill lp-wf-20">3</span><span class="lp-demo-box lp-demo-box--pill lp-wf-20">4</span><span class="lp-demo-box lp-demo-box--pill lp-wf-20">5</span>
</div>
<p class="lp-text-xs lp-text-muted lp-mb-1">content-center</p>
<div class="lp-d-flex lp-flex-wrap lp-content-center lp-gap-2 lp-demo-frame lp-hf-32 lp-mb-3">
    <span class="lp-demo-box lp-demo-box--pill lp-wf-20">1</span><span class="lp-demo-box lp-demo-box--pill lp-wf-20">2</span><span class="lp-demo-box lp-demo-box--pill lp-wf-20">3</span><span class="lp-demo-box lp-demo-box--pill lp-wf-20">4</span><span class="lp-demo-box lp-demo-box--pill lp-wf-20">5</span>
</div>
<p class="lp-text-xs lp-text-muted lp-mb-1">content-between</p>
<div class="lp-d-flex lp-flex-wrap lp-content-between lp-gap-2 lp-demo-frame lp-hf-32">
    <span class="lp-demo-box lp-demo-box--pill lp-wf-20">1</span><span class="lp-demo-box lp-demo-box--pill lp-wf-20">2</span><span class="lp-demo-box lp-demo-box--pill lp-wf-20">3</span><span class="lp-demo-box lp-demo-box--pill lp-wf-20">4</span><span class="lp-demo-box lp-demo-box--pill lp-wf-20">5</span>
</div>

Order

Source order is 1 → 2 → 3 → 4 but order-* changes the visual flow.

1 (order-3) 2 (order-first) 3 (order-last) 4 (order-2)

<p class="lp-text-xs lp-text-muted lp-mb-3">Source order is 1 → 2 → 3 → 4 but <code class="lp-text-danger">order-*</code> changes the visual flow.</p>
<div class="lp-d-flex lp-gap-2">
    <span class="lp-demo-box lp-demo-box--pill lp-order-3">1 (order-3)</span>
    <span class="lp-demo-box lp-demo-box--pill lp-order-first">2 (order-first)</span>
    <span class="lp-demo-box lp-demo-box--pill lp-order-last">3 (order-last)</span>
    <span class="lp-demo-box lp-demo-box--pill lp-order-2">4 (order-2)</span>
</div>

CSS Reference

Class	Description
`.lp-d-{none\|block\|inline\|inline-block\|flex\|inline-flex\|grid}`	Display type
`.lp-visible` / `.lp-invisible`	Visibility
`.lp-sr-only`	Screen-reader-only (accessible hidden)
`.lp-flex-{row\|col\|row-reverse\|col-reverse}`	Flex direction
`.lp-flex-{wrap\|nowrap}`	Flex wrap
`.lp-justify-{start\|end\|center\|between\|around\|evenly}`	Justify content
`.lp-items-{start\|end\|center\|stretch\|baseline}`	Align items
`.lp-self-{start\|end\|center\|stretch}`	Align self
`.lp-flex-{1\|auto\|none}`	Flex shorthand
`.lp-grow` / `.lp-grow-0`	Flex grow
`.lp-shrink` / `.lp-shrink-0`	Flex shrink
`.lp-content-{start\|end\|center\|between\|around\|stretch}`	Align content (multi-line)
`.lp-order-{0..12}`	Visual order
`.lp-order-{first\|last}`	Move to start / end
`.lp-d-{sm\|md\|lg\|xl\|2xl}-{type}`	Responsive display (breakpoint-up)