📖 Guide

CSS Flexbox Reference

Complete CSS Flexbox reference — container properties, item properties, and common layout patterns.

79 commands across 11 categories

Container: Display Container: Direction & Wrap Container: Justify Content Container: Align Items Container: Align Content Container: Gap Item: Order Item: Flex Grow, Shrink, Basis Item: Flex Shorthand Item: Align Self Common Layouts

Container: Display

Command	Description
`display: flex`	Create a block-level flex container
`display: inline-flex`	Create an inline-level flex container

Container: Direction & Wrap

Command	Description
`flex-direction: row`	Main axis left to right (default)
`flex-direction: row-reverse`	Main axis right to left
`flex-direction: column`	Main axis top to bottom
`flex-direction: column-reverse`	Main axis bottom to top
`flex-wrap: nowrap`	All items on one line (default)
`flex-wrap: wrap`	Items wrap onto multiple lines
`flex-wrap: wrap-reverse`	Items wrap in reverse order
`flex-flow: row wrap`	Shorthand for flex-direction and flex-wrap
`flex-flow: column nowrap`	Shorthand: vertical direction, no wrapping

Container: Justify Content

Command	Description
`justify-content: flex-start`	Pack items at the start of the main axis (default)
`justify-content: flex-end`	Pack items at the end of the main axis
`justify-content: center`	Center items along the main axis
`justify-content: space-between`	Equal space between items, no space at edges
`justify-content: space-around`	Equal space around items (half-size at edges)
`justify-content: space-evenly`	Equal space between and around items
`justify-content: start`	Pack items at the start (writing-mode aware)
`justify-content: end`	Pack items at the end (writing-mode aware)

Container: Align Items

Command	Description
`align-items: stretch`	Stretch items to fill cross axis (default)
`align-items: flex-start`	Align items to start of cross axis
`align-items: flex-end`	Align items to end of cross axis
`align-items: center`	Center items on the cross axis
`align-items: baseline`	Align items along their text baseline
`align-items: start`	Align to start (writing-mode aware)
`align-items: end`	Align to end (writing-mode aware)

Container: Align Content

Command	Description
`align-content: stretch`	Stretch lines to fill container (default, multi-line only)
`align-content: flex-start`	Pack lines at cross-axis start
`align-content: flex-end`	Pack lines at cross-axis end
`align-content: center`	Center lines in cross axis
`align-content: space-between`	Equal space between lines
`align-content: space-around`	Equal space around lines
`align-content: space-evenly`	Equal space between and around lines

Container: Gap

Command	Description
`gap: 16px`	Set equal row and column gap between items
`gap: 16px 24px`	Set row gap and column gap separately
`row-gap: 16px`	Set gap between rows only
`column-gap: 24px`	Set gap between columns only
`gap: 1rem`	Gap using rem units
`gap: 5%`	Gap as percentage of container size

Item: Order

Command	Description
`order: 0`	Default order — items appear in source order
`order: -1`	Move item before all default-ordered items
`order: 1`	Move item after all default-ordered items
`order: 99`	Push item to the end

Item: Flex Grow, Shrink, Basis

Command	Description
`flex-grow: 0`	Don't grow to fill available space (default)
`flex-grow: 1`	Grow to fill available space equally
`flex-grow: 2`	Grow at twice the rate of flex-grow: 1 items
`flex-shrink: 1`	Shrink if necessary (default)
`flex-shrink: 0`	Don't shrink — maintain basis size
`flex-shrink: 2`	Shrink at twice the rate of default items
`flex-basis: auto`	Use item's intrinsic size (default)
`flex-basis: 0`	Ignore intrinsic size — distribute space purely by flex-grow
`flex-basis: 200px`	Set initial size before growing/shrinking
`flex-basis: 25%`	Set initial size as percentage of container
`flex-basis: content`	Size based on content (like auto but ignores width/height)

Item: Flex Shorthand

Command	Description
`flex: 0 1 auto`	Default: don't grow, can shrink, auto basis
`flex: 1`	Shorthand for flex: 1 1 0% — grow equally, ignore intrinsic size
`flex: auto`	Shorthand for flex: 1 1 auto — grow equally, respect intrinsic size
`flex: none`	Shorthand for flex: 0 0 auto — fully inflexible
`flex: 2 1 0%`	Grow at 2x rate, can shrink, zero basis
`flex: 0 0 200px`	Fixed size: don't grow or shrink, 200px basis
`flex: 1 0 300px`	Grow from 300px minimum, don't shrink

Item: Align Self

Command	Description
`align-self: auto`	Use container's align-items value (default)
`align-self: flex-start`	Override: align this item to cross-axis start
`align-self: flex-end`	Override: align this item to cross-axis end
`align-self: center`	Override: center this item on cross axis
`align-self: stretch`	Override: stretch this item to fill cross axis
`align-self: baseline`	Override: align this item to text baseline

Common Layouts

Command	Description
`display: flex; justify-content: center; align-items: center`	Center an item both horizontally and vertically
`display: flex; justify-content: space-between; align-items: center`	Navbar layout — items spread with vertical centering
`display: flex; flex-direction: column; min-height: 100vh /* main */ flex: 1`	Sticky footer — header, expanding main, footer at bottom
`display: flex; flex-wrap: wrap; gap: 16px /* items */ flex: 1 1 300px`	Responsive card grid — wraps when items can't fit 300px minimum
`display: flex /* sidebar / flex: 0 0 250px / main */ flex: 1`	Sidebar layout — fixed sidebar, fluid main content
`display: flex; flex-direction: column; gap: 8px`	Vertical stack with consistent spacing
`display: flex; gap: 8px; align-items: center /* icon / flex-shrink: 0 / text / flex: 1 / action */ flex-shrink: 0`	Media object — icon, flexible text, action button
`display: flex; flex-wrap: wrap /* items */ flex: 1 1 calc(33.333% - 16px)`	Three-column grid that wraps responsively
`display: flex; align-items: stretch /* child */ width: 100%`	Equal height columns
`margin-left: auto`	Push item to the right (flex auto margins)
`margin: auto`	Center single item in flex container using auto margins
`display: flex; flex-direction: row-reverse; justify-content: flex-end`	Visual reversal while maintaining source order for accessibility

More Guides

Complete Git command reference — from basics to advanced workflows. Searchable, with examples.

Complete Vim/Vi command reference — modes, motions, editing, search, and advanced features.

Docker Commands

Complete Docker & Docker Compose command reference — containers, images, volumes, networks, and orchestration.

Regex Reference

Complete regular expression reference — syntax, patterns, quantifiers, groups, lookaheads, and common recipes.

Complete Linux/Bash command reference — file management, text processing, networking, system admin, and shell scripting.

Kubernetes Commands

Complete Kubernetes & kubectl command reference — pods, deployments, services, configmaps, and cluster management.

Python Reference

Complete Python reference — syntax, data structures, string methods, file I/O, comprehensions, and common patterns.

Complete SQL reference — queries, joins, aggregation, subqueries, indexes, and database management.

Nginx Reference

Complete Nginx configuration reference — server blocks, locations, proxying, SSL, load balancing, and caching.

Complete SSH reference — connections, key management, tunneling, config, SCP/SFTP, and security hardening.

Jenkins Reference

Complete Jenkins reference — pipeline syntax, Jenkinsfile, plugins, CLI, agents, and CI/CD patterns.

HTTP Headers Reference

Complete HTTP headers reference — request headers, response headers, caching, security, CORS, and content negotiation. Searchable, with examples.

PostgreSQL Reference

Comprehensive PostgreSQL reference — from connection basics to advanced features like JSONB, full-text search, window functions, and performance tuning.

Async Patterns Reference

Multi-language async/concurrency patterns — JavaScript, Python, Go, Rust, Java, and universal concurrency patterns.

Protobuf & gRPC Reference

Comprehensive reference for Protocol Buffers (proto3) and gRPC — message definitions, services, streaming, and common patterns.

JS Array Methods

Complete JavaScript Array methods reference — creating, searching, transforming, sorting, iterating, and common patterns. Searchable, with examples.

Tailwind CSS Reference

Complete Tailwind CSS reference — layout, spacing, typography, colors, responsive design, states, and common patterns. Searchable, with examples.

GraphQL Reference

Complete GraphQL reference — schema definition, types, queries, mutations, directives, fragments, and common patterns. Searchable, with examples.

VS Code Shortcuts

Complete VS Code keyboard shortcuts — editing, navigation, search, multi-cursor, terminal, debug, and more. Searchable, with Cmd/Ctrl notation.

CSS Grid Reference

Complete CSS Grid reference — container properties, item placement, grid functions, and common layout patterns. Searchable, with examples.

React Hooks Reference

Complete React Hooks reference — useState, useEffect, useContext, custom hooks, and common patterns. Searchable, with examples.

TypeScript Reference

Complete TypeScript reference — types, interfaces, generics, utility types, and advanced patterns. Searchable, with examples.

AWS CLI Reference

Complete AWS CLI reference — EC2, S3, IAM, Lambda, ECS, RDS, CloudFormation, and common operations.

Complete Go (Golang) reference — syntax, types, functions, concurrency, error handling, and common patterns.

PowerShell Reference

Complete PowerShell reference — cmdlets, pipelines, scripting, file operations, remote management, and Active Directory.

Complete Redis command reference — strings, hashes, lists, sets, sorted sets, pub/sub, transactions, and server management.

Terraform Commands

Complete Terraform reference — init, plan, apply, state management, modules, workspaces, and HCL syntax.

Ansible Commands

Complete Ansible reference — playbooks, modules, inventory, roles, vault, and ad-hoc commands.

📖 Free, searchable command reference. Bookmark this page for quick access.