Flex Submodule

Navigation: uCss > Source > Modules > Layout > Flex

Smart Flexbox Utilities. A responsive, gap-aware flexbox system for 1-Dimensional layouts — direction, wrapping, alignment, and item control without the verbosity.

📑 Contents

🌟 Overview
🤯 Philosophy
🚀 Getting Started
💡 How to Use It (Perfect Scenarios)
📦 Installation & Stats
📂 Files Reference
📍 Reference: Content Map
💡 Best Practices
🔧 For Developers
🗺️ Visual Map

🌟 Overview

The Flex module handles 1-Dimensional layouts (Row OR Column). Grid handles macro 2-D structure; Flex is for micro-components — navbars, media objects, button groups, pills.

Top Features

Zero-verbosity: .f is a flex container with a fluid default gap already applied.
Direction-Agnostic: .row → .col responsively (.col--md).
Smart Wrapping: .wrap / .nowrap at every breakpoint.
Item Control: grow/shrink/basis/order utilities on children.

🤯 Philosophy

Standard Flexbox is verbose. display: flex; flex-direction: column; align-items: center; gap: 1rem; is a lot of typing. uCss compresses it to .fxc.ai-c — and the gap comes free.

Flex composes with Grid: a Card is a Grid item, but the content inside the card is Flex.

🚀 Getting Started

<!-- Navbar -->
<nav class="f ai-c">
  <div class="logo">Logo</div>
  <div class="f"><a href="#">Home</a><a href="#">About</a><a href="#">Contact</a></div>
</nav>

<!-- Stack on Mobile, Row on Desktop -->
<div class="col row--md">
  <div>Item 1 (top / left)</div>
  <div>Item 2 (bottom / right)</div>
</div>

Every .f already carries a fluid default gap (---xs, ≈ 0.875–1rem). Override per container with style="--f-g: 1.5rem".

💡 How to Use It (Perfect Scenarios)

Each scenario shows an Emmet abbreviation → expanded HTML → why.

Emmet: nav.f.row.ai-c>(div.logo+div.f>(a*3))

<nav class="f ai-c">
  <div class="logo">Logo</div>
  <div class="f"><a href="#">Home</a><a href="#">About</a><a href="#">Contact</a></div>
</nav>

Why: .f is the default; .ai-c vertical-centers; the inner .f keeps links evenly gapped.

2. Media Object

Emmet: div.f.ai-c>(figure>img+div>(h3+p))

<div class="f ai-c">
  <figure><img src="…" alt="…"></figure>
  <div><h3>Title</h3><p>Body…</p></div>
</div>

Why: avatar/icon + text, vertically centered — the classic media object. Perfect for testimonials, list rows, comments.

3. Responsive Stack

Emmet: div.row.col--md>(div*3)

<div class="row col--md">
  <div>1</div><div>2</div><div>3</div>
</div>

Why: side-by-side on desktop, stacked in a column from --md down. Add .wrap for fluid wrapping instead.

Emmet: footer.f.wrap.ai-c.jc-sb>(div+nav.f>(a*3))

<footer class="f wrap ai-c jc-sb">
  <div>© 2026 …</div>
  <nav class="f"><a href="#">Legal</a><a href="#">Privacy</a><a href="#">Contact</a></nav>
</footer>

Why: .jc-sb pushes the two groups apart; .wrap protects narrow screens.

5. Icon + Label (Pill / Badge)

Emmet: div.f.ai-c>(svg+span)

<div class="f ai-c"><svg …></svg><span>Label</span></div>

Why: the minimal icon+text row used by pills, badges, meta rows, and tooltips.

6. Item Grow / Shrink / Basis

Emmet: div.f>(div.fxg-1+div.fxs-0+div.fxb-thd)

<div class="f">
  <div class="fxg-1">Grows to fill</div>
  <div class="fxs-0">Never shrinks</div>
  <div class="fxb-thd">Third of the row</div>
</div>

Why: one-line item control without touching the container.

All direction/wrap/alignment/item classes accept responsive suffixes: --sm, --smd, --md, --mdl, --lg (e.g. .col--md, .row--lg, .wrap--sm, .ai-c--md, .fxg-1--lg).

📦 Installation & Stats

This Submodule is part of layout.css.

File	Full (Raw)	Clean	Min	Gzip	Brotli
`flex/base.css`	5.3 KB	3.9 KB	3.1 KB	1.2 KB	1.0 KB
`flex/direction.css`	1.8 KB	1.5 KB	1.3 KB	0.4 KB	0.4 KB
`flex/wrap.css`	0.8 KB	0.6 KB	0.5 KB	0.3 KB	0.2 KB
`flex/item/base.css`	4.5 KB	3.8 KB	3.0 KB	0.9 KB	0.7 KB
`flex/item/controls.css`	8.3 KB	7.7 KB	6.6 KB	1.5 KB	1.1 KB

Stats reflect the last verified build from dist/latest. Run npm run build:latest to regenerate.

HTML Snippets

Since this is a nested module, it is included in layout.min.css:

<link rel="preconnect" href="https://ucss.unqa.dev">
<link rel="stylesheet" href="https://ucss.unqa.dev/latest/lib/layout.min.css">

📂 Files Reference

File	Description
`base.css`	Container. `.f` + default gap (`--f-g`), responsive direction/alignment container queries.
`direction.css`	Direction. `.fxc` or `.col` / `.fxr` or `.row` and `.rv` (reverse), responsive variants.
`wrap.css`	Wrapping. `.fxw` or `.wrap` / `.fxnw` or `.nowrap`, responsive variants.
`item/base.css`	Item defaults. Grow/shrink/basis, align-self, order on `.f > *`.
`item/controls.css`	Item controls. `.fxg-`, `.fxs-`, `.fxb-`, `.o-`, margin helpers.

Alignment (.ai-*, .jc-*, .ac-*) and gap presets live in the shared Utilities controls — flex reads them through the same variables.

📍 Reference: Content Map

Base Classes

Class	Effect
`.f`	flex container (default `row`) + fluid gap `--f-g`
`.row` / `.fxr`	`flex-direction: row`
`.col` / `.fxc`	`flex-direction: column`
`.rv` / `.reverse`	reverse current direction
`.wrap` / `.fxw`	`flex-wrap: wrap`
`.nowrap` / `.fxnw`	`flex-wrap: nowrap`

Direction & Wrap

Class	Responsive
`.row` / `.col`	`--sm`, `--smd`, `--md`, `--mdl`, `--lg`
`.rv`	`--sm`, `--smd`, `--md`, `--mdl`, `--lg`
`.wrap` / `.nowrap`	`--sm`, `--smd`, `--md`, `--mdl`, `--lg`

Item Controls

Class	Alias	Variable	Effect
`.fxg-1` / `.fxg-0`	`.grow-1` / `.grow-0`	`--fxg`	`flex-grow`
`.fxs-0` / `.fxs-1`	`.shrink-0` / `.shrink-1`	`--fxs`	`flex-shrink`
`.fxb-auto`	`.basis-auto`	`--fxb`	`flex-basis: auto`
`.fxb-thd`	`.basis-third`	`--fxb`	`flex-basis: 33.333%`
`.fxb-half`	`.basis-half`	`--fxb`	`flex-basis: 50%`
`.fxb-full`	`.basis-full`	`--fxb`	`flex-basis: 100%`
`.o-1` … `.o-9`	`.first`, `.last`, …	`--o`	`order`
`.mi-a`, `.mb-a`, …	—	`--fi-mi*`	auto margins

All item controls accept --sm / --md / --lg suffixes (e.g. .fxg-1--lg).

Alignment & Gaps

Flex reads the shared alignment variables via --f-ai, --f-ac, --f-jc:

Class	Effect
`.ai-c` / `.ai-s` / `.ai-e` / `.ai-st` / `.ai-b`	`align-items: center/start/end/stretch/baseline`
`.jc-c` / `.jc-s` / `.jc-e` / `.jc-sb` / `.jc-sa` / `.jc-se`	`justify-content: center/start/end/space-between/around/evenly`
`.ac-*`	`align-content`
`.as-` / `.js-`	`align-self` / `justify-self` on items

Gap: default --f-g ≈ 0.875–1rem (fluid). Override inline: style="--f-g: 1.5rem", or --f-rg / --f-cg for row/column only.

💡 Best Practices

Use Flex for 1-D lists and micro-layouts (navbars, media objects, button groups, pills).
Use Grid (.g) for 2-D layouts and strict column alignment.
Combine: a Card is a Grid item, but its inner content is Flex.
Let .f keep its default gap — only override --f-g when you need a specific rhythm.

🔧 For Developers

Flex containers read the shared alignment vars, so you can drive them from anywhere:

.my-nav {
  --f-g: 1.25rem;   /* gap */
  --f-ai: center;   /* align-items */
  --f-jc: space-between;
}

Item overrides stay on the child:

.my-item {
  --fxg: 1;
  --fxs: 0;
  --fxb: 20%;
}