Flex — CSS Flexbox Layout Generator

A CLI tool for generating CSS Flexbox layouts. Create flex containers, configure alignment, justify, wrap, gap, and order properties, then export production-ready CSS code.

Prerequisites

• - Python 3.8+
• INLINECODE0 shell
• Write access to INLINECODE1

Data Storage

All layout configurations are stored in JSONL format at ~/.flex/data.jsonl. Each record represents a saved flex layout with all its properties.

Commands

Run commands via: INLINECODE3

create

Create a new flex container layout with a name and optional initial properties.

CODEBLOCK0

Arguments:

• - --name — Layout name (required)
• INLINECODE5 — Flex direction: row, column, row-reverse, column-reverse (optional, default: row)
• INLINECODE11 — Number of child items (optional, default: 3)

row

Create a quick horizontal row layout preset.

CODEBLOCK1

Arguments:

• - --name — Layout name (required)
• INLINECODE13 — Number of items (optional, default: 3)
• INLINECODE14 — Gap in pixels (optional, default: 0)

column

Create a quick vertical column layout preset.

CODEBLOCK2

Arguments:

• - --name — Layout name (required)
• INLINECODE16 — Number of items (optional, default: 3)
• INLINECODE17 — Gap in pixels (optional, default: 0)

wrap

Toggle or set flex-wrap on an existing layout.

CODEBLOCK3

Arguments:

• - --id — Layout ID (required)
• INLINECODE19 — Wrap value: wrap, nowrap, wrap-reverse (optional, default: wrap)

align

Set align-items property on a layout.

CODEBLOCK4

Arguments:

• - --id — Layout ID (required)
• INLINECODE25 — Alignment: flex-start, flex-end, center, stretch, baseline (required)

justify

Set justify-content property on a layout.

CODEBLOCK5

Arguments:

• - --id — Layout ID (required)
• INLINECODE32 — Justify: flex-start, flex-end, center, space-between, space-around, space-evenly (required)

gap

Set the gap property on a layout.

CODEBLOCK6

Arguments:

• - --id — Layout ID (required)
• INLINECODE40 — Gap in pixels (optional)
• INLINECODE41 — Row gap in pixels (optional)
• INLINECODE42 — Column gap in pixels (optional)

order

Set the order of a specific child item within a layout.

CODEBLOCK7

Arguments:

• - --id — Layout ID (required)
• INLINECODE44 — Item index, 1-based (required)
• INLINECODE45 — Order value (required)

grow

Set flex-grow for a child item.

CODEBLOCK8

Arguments:

• - --id — Layout ID (required)
• INLINECODE47 — Item index (required)
• INLINECODE48 — Flex-grow value (required)

shrink

Set flex-shrink for a child item.

CODEBLOCK9

Arguments:

• - --id — Layout ID (required)
• INLINECODE50 — Item index (required)
• INLINECODE51 — Flex-shrink value (required)

export

Export a layout or all layouts as CSS code.

CODEBLOCK10

Arguments:

• - --id — Export a specific layout (optional)
• INLINECODE53 — Export all layouts (optional)
• INLINECODE54 — Output file path (optional, default: stdout)

help

Display help information and list all available commands.

CODEBLOCK11

version

Display the current tool version.

CODEBLOCK12

Examples

CODEBLOCK13

Notes

• - Each layout stores complete flex properties: direction, wrap, align, justify, gap, and per-item grow/shrink/order
• The export command generates clean, production-ready CSS with class names derived from layout names
• Use row and column shortcuts for common patterns instead of INLINECODE58
• Item properties (grow, shrink, order) are stored per item index within each layout