Flex Item Submodule

Navigation: uCss > Source > Modules > Layout > Flex > Item

Flex Child Controls. Grow, shrink, basis, order, and auto-margins for every direct child of a flex container — with responsive variants.

📑 Contents

🌟 Overview
💡 How to Use It (Perfect Scenarios)
📦 Installation & Stats
📂 Files Reference
📍 Reference: Content Map
💡 Best Practices

🌟 Overview

Every direct child of .f (or .fxc, .fxr, .col, .row) automatically receives sane item defaults (grow: 0, shrink: 1, basis: auto). item/controls.css adds one-line utilities to override them.

Grow / Shrink / Basis — .fxg-*, .fxs-*, .fxb-* (aliases .grow-*, .shrink-*, .basis-*).
Order — .o-1 … .o-9, .o-f/.first, .o-l/.last.
Auto Margins — .mi-a, .mb-a, .mi-as, .mi-ae, … for pushing items apart.

All accept responsive suffixes --sm, --md, --lg (and --smd / --mdl).

💡 How to Use It (Perfect Scenarios)

1. Grow to Fill + Never Shrink

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

<div class="f">
  <div class="fxg-1">Expands to fill the row</div>
  <div class="fxs-0">Keeps its natural width</div>
</div>

Why: flex-grow: 1 on one child absorbs free space; flex-shrink: 0 protects a logo/badge from squishing.

2. Basis Fractions

Emmet: div.f>(div.fxb-thd+div.fxb-thd+div.fxb-thd)

<div class="f">
  <div class="fxb-thd">⅓</div>
  <div class="fxb-thd">⅓</div>
  <div class="fxb-thd">⅓</div>
</div>

Why: flex-basis: 33.333% — three equal columns without a wrapper. Also basis-half (50%), basis-quarter (25%), basis-full (100%).

3. Reorder Items

Emmet: div.f>(div+div.o-1)

<div class="f">
  <div>First in source, last visually</div>
  <div class="o-1">Second in source, first visually</div>
</div>

Why: order rearranges visually without touching markup — great for responsive priority swaps (div.o-1--md).

4. Push Apart with Auto Margins

Emmet: div.f>(div+div.mi-as)

<div class="f">
  <div>Left</div>
  <div class="mi-as">Pushed to the far right</div>
</div>

Why: margin-inline-start: auto on the last item is the classic "push to the edge" without justify-content.

📦 Installation & Stats

This submodule is part of layout.css.

File	Full (Raw)	Clean	Min	Gzip	Brotli
`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.

📂 Files Reference

File	Description
`base.css`	Item defaults. `:where(.f > *)` — grow/shrink/basis, align-self, order, and the `--fxg` / `--fxs` / `--fxb` / `--o` variables (base + `--sm`/`--md`/`--lg`).
`controls.css`	Utilities. `.fxg-`, `.fxs-`, `.fxb-`, `.o-`, and auto-margin helpers.

📍 Reference: Content Map

Utility	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-1-3` / `.fxb-thd`	`.basis-third`	`--fxb`	`33.333%`
`.fxb-1-2` / `.fxb-half`	`.basis-half`	`--fxb`	`50%`
`.fxb-full`	`.basis-full`	`--fxb`	`100%`
`.o-1` … `.o-9`	`.first` / `.last`	`--o`	`order: 1` / `order: 9`
`.mi-a` / `.mi-as` / `.mi-ae`	—	`--fi-mi*`	margin-inline auto
`.mb-a` / `.mb-as` / `.mb-ae`	—	`--fi-mb*`	margin-block auto

Responsive: --sm, --smd, --md, --mdl, --lg (e.g. .fxg-1--lg, .o-1--md, .mi-as--sm).

💡 Best Practices

Put item controls on the child, not the container.
Use .fxb-* for fixed proportions, .fxg-1 for absorbing free space.
flex-shrink: 0 on media/avatars prevents ugly squishing.
Auto margins beat justify-content when you want one item pushed to the edge.

Navigation: uCss > Source > Modules > Layout > Flex > Item