Positioning

Positioning utilities let you control how flex and grid children are aligned and distributed without writing custom CSS. There are two kinds: container classes (applied to the parent – affect all children) and self classes (applied to an individual child – override the parent).

Items Alignment

Apply wf-items-* to any flex or grid container. Controls cross-axis alignment of all direct children.

Start wf-items-start

A

B

C

<div class="wf-cluster wf-items-start">...</div>

Center wf-items-center

A

B

C

<div class="wf-cluster wf-items-center">...</div>

End wf-items-end

A

B

C

<div class="wf-cluster wf-items-end">...</div>

Baseline wf-items-baseline

Small

Large

Normal

<div class="wf-cluster wf-items-baseline">...</div>

Justify Distribution

Apply wf-justify-* to any flex or grid container. Controls how children are distributed along the main axis.

Start wf-justify-start

A

B

C

<div class="wf-cluster wf-justify-start">...</div>

Center wf-justify-center

A

B

C

<div class="wf-cluster wf-justify-center">...</div>

End wf-justify-end

A

B

C

<div class="wf-cluster wf-justify-end">...</div>

Between wf-justify-between

A

B

C

<div class="wf-cluster wf-justify-between">...</div>

Around wf-justify-around

A

B

C

<div class="wf-cluster wf-justify-around">...</div>

Self Alignment

Apply wf-self-* to an individual child inside a flex container. Overrides the container's align-items for that item only.

Mixed Self-Alignment

All items share wf-items-stretch on the container; each child then overrides with its own wf-self-* .

self-start

self-center

self-end

self-stretch

self-baseline

<div class="wf-cluster wf-items-stretch">
  <div class="wf-self-start">start</div>
  <div class="wf-self-center">center</div>
  <div class="wf-self-end">end</div>
  <div class="wf-self-stretch">stretch</div>
  <div class="wf-self-baseline">baseline</div>
</div>

Justify Self

Apply wf-justify-self-* to an individual child inside a grid container. Controls horizontal placement within the child's grid cell.

Horizontal Override per Grid Child

Each row has one child with a different wf-justify-self-* value. The grid uses wf-center so the default placement is centered.

justify-self-start

justify-self-center

justify-self-end

justify-self-stretch

<div class="wf-center">
  <div class="wf-justify-self-start">start</div>
  <div class="wf-justify-self-center">center</div>
  <div class="wf-justify-self-end">end</div>
  <div class="wf-justify-self-stretch">stretch</div>
</div>

Class Reference

Class Name	CSS Property	Applied To	Description
wf-items-*	align-items	Container	Cross-axis alignment for all children: start , center , end , stretch , baseline .
wf-justify-*	justify-content	Container	Main-axis distribution of children: start , center , end , between , around .
wf-self-*	align-self	Child	Cross-axis override for a single child: auto , start , center , end , stretch , baseline .
wf-justify-self-*	justify-self	Child	Inline (horizontal) override for a single grid child: start , center , end , stretch .