Flex Layout
Compact flex layout shortcuts using 2-letter position codes. These utilities allow you to define alignment, distribution, and direction in a single, readable class.
Position Codes
The system maps two letters to the vertical and horizontal axes, allowing you to define complex positioning with a single utility class like fxrow-cc or fxcol-ss.
scehwMain vs Cross Axis
Container Shortcuts
Use these shortcuts on parent elements to establish a flex context and define child positioning in one go.
fxrow-{vh}Flex Row
fxrow-cc (center-center) fxcol-{vh}Flex Column
fxcol-ss (start-start) ifxrow-{vh}Inline Flex Row
ifxrow-cw (center-between) ifxcol-{vh}Inline Flex Column
ifxcol-ee (end-end) Self Shortcuts
Use these shortcuts on child elements to override their alignment within a flex parent.
fxrowself-{vh}Self position in row
fxrowself-cc (center-center) fxcolself-{vh}Self position in column
fxcolself-ss (start-start) Practical Examples
Flex layout shortcuts shine when building common UI components. Here are some practical implementations using this syntax.
Centered Content
Centering content both horizontally and vertically is as simple as applying fxrow-cc to the container.
<div class="fxrow-cc h-40">
Horizontally and vertically centered
</div>
Navigation Header
This example uses responsive utilities to stack the header content on mobile (fxcol-cc) and spread it out on larger screens (fxrow-cw).
<div class="cnt">
<header class="fxcol-cc g-4 xs:fxrow-cw bgc-body-60 p-4 rad-3 br brc-body-100">
<div class="fxrow-cs g-2">
<div class="bgc-royalblue c-white fs-8 lh-0 square-9 rad-% fxrow-cc">⍟</div>
<span class="fw=700 c-body-950 fs-4.5">Logo</span>
</div>
<nav class="fxrow-cc fxwr=wrap g-4 xs:g-5 fs-3.5 fw-500 c-body-600">
<a class="&:hover:c-royalblue cursor=pointer">Components</a>
<a class="&:hover:c-royalblue cursor=pointer">Templates</a>
<a class="bgc-body-900 c-body-50 px-4 py-1.5 rad-2 &:hover:o-90 cursor=pointer">Login</a>
</nav>
</header>
</div>
Vertical Stack
Create a vertical stack with items aligned to the top-left using fxcol-ss and a gap utility.
<div class="fxcol-ss g-4 --accent=oklch(0.660_0.25_260)">
<div class="fxrow-cs g-3 p-4 rad-2 fw=600 w-% bgc-accent-500/10 c-accent-700 br brc-accent-500/20">
<div class="square-2 bgc-accent-500 rad-%"></div>
Feature One
</div>
<div class="fxrow-cs g-3 p-4 rad-2 fw=600 w-% bgc-accent-500/10 c-accent-700 br brc-accent-500/20">
<div class="square-2 bgc-accent-500 rad-%"></div>
Feature Two
</div>
<div class="fxrow-cs g-3 p-4 rad-2 fw=600 w-% bgc-accent-500/10 c-accent-700 br brc-accent-500/20">
<div class="square-2 bgc-accent-500 rad-%"></div>
Feature Three
</div>
</div>
Responsive Shifts
Easily switch between a column and a row based on breakpoints. For example, fxcol-ss xs:fxrow-ss will stack elements on mobile and switch to a row on larger screens.
<!-- Responsive layout -->
<div class="cnt">
<div class="fxcol-ss xs:fxrow-ss g-4">
<div class=" p-6 rad-3 w-% bgc-coral-500/10 c-coral-700 br brc-coral-500/20">
<div class="fs-2.5 mb-1">MOBILE</div>
<div class="fw=600">Stacked View</div>
</div>
<div class="p-6 rad-3 w-% bgc-lightgreen-500/10 c-lightgreen-700 br brc-lightgreen-500/20">
<div class="fs-2.5 mb-1">DESKTOP</div>
<div class="fw=600">Row View</div>
</div>
</div>
</div>
Self Positioning
Override parent alignment for a specific child using the fxrowself-{vh} utility.
<div class="fxrow-ss g-4 h-48">
<div class="p-6 rad-3 bgc-coral-500/10 c-coral-700 br brc-coral-500/20">
<div class="fs-2.5 mb-1">DEFAULT</div>
<div class="fw=600">Top - Left</div>
</div>
<div class="fxrowself-ee p-6 rad-3 bgc-lightgreen-500/10 c-lightgreen-700 br brc-lightgreen-500/20">
<div class="fs-2.5 mb-1">OVERRIDE</div>
<div class="fw=600">Bottom - Right</div>
</div>
</div>
Related Properties
Refer to the underlying CSS Flexbox properties for granular layout control.