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+
• bash shell
• Write access to ~/.flex/

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: bash scripts/script.sh <command> [arguments...]

create

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

bash scripts/script.sh create --name "navbar" --direction row --items 5
bash scripts/script.sh create --name "sidebar" --direction column

Arguments:

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

row

Create a quick horizontal row layout preset.

bash scripts/script.sh row --name "header-row" --items 4
bash scripts/script.sh row --name "card-grid" --gap 16

Arguments:

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

column

Create a quick vertical column layout preset.

bash scripts/script.sh column --name "sidebar-nav" --items 6

Arguments:

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

wrap

Toggle or set flex-wrap on an existing layout.

bash scripts/script.sh wrap --id <layout_id> --value wrap
bash scripts/script.sh wrap --id <layout_id> --value nowrap

Arguments:

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

align

Set align-items property on a layout.

bash scripts/script.sh align --id <layout_id> --value center

Arguments:

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

justify

Set justify-content property on a layout.

bash scripts/script.sh justify --id <layout_id> --value space-between

Arguments:

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

gap

Set the gap property on a layout.

bash scripts/script.sh gap --id <layout_id> --value 16
bash scripts/script.sh gap --id <layout_id> --row 8 --column 16

Arguments:

• --id — Layout ID (required)
• --value — Gap in pixels (optional)
• --row — Row gap in pixels (optional)
• --column — Column gap in pixels (optional)

order

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

bash scripts/script.sh order --id <layout_id> --item 2 --value -1

Arguments:

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

grow

Set flex-grow for a child item.

bash scripts/script.sh grow --id <layout_id> --item 1 --value 2

Arguments:

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

shrink

Set flex-shrink for a child item.

bash scripts/script.sh shrink --id <layout_id> --item 3 --value 0

Arguments:

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

export

Export a layout or all layouts as CSS code.

bash scripts/script.sh export --id <layout_id>
bash scripts/script.sh export --all --output layouts.css

Arguments:

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

help

Display help information and list all available commands.

bash scripts/script.sh help

version

Display the current tool version.

bash scripts/script.sh version

Examples

# Create a navigation bar
bash scripts/script.sh create --name "navbar" --direction row --items 5
bash scripts/script.sh justify --id abc123 --value space-between
bash scripts/script.sh align --id abc123 --value center
bash scripts/script.sh export --id abc123

# Quick card grid
bash scripts/script.sh row --name "cards" --items 4 --gap 16
bash scripts/script.sh wrap --id def456 --value wrap

# Export everything
bash scripts/script.sh export --all --output flex-layouts.css

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 create
• Item properties (grow, shrink, order) are stored per item index within each layout

Powered by BytesAgain | bytesagain.com | hello@bytesagain.com