CSS Flexbox, Grid & Modern Layout Properties Reference
Visual quick reference for CSS Flexbox container/child alignment properties, CSS Grid layout patterns, and modern responsive functions (clamp, min, max).
Need to generate CSS effects visually?
Build modern glassmorphism blurs, multi-layered box shadows, and gradients.
Flexbox Container Properties
Properties applied to the parent flex container.
| Syntax / Token | Name / Type | Description | Example / Notes |
|---|---|---|---|
display: flex; | Flex Container | Defines a flex container and activates flex context for direct children | — |
flex-direction: row | column | row-reverse | column-reverse; | Direction | Sets the main axis direction | — |
justify-content: flex-start | center | flex-end | space-between | space-around | space-evenly; | Main Axis Alignment | Aligns flex items along the main axis | — |
align-items: stretch | flex-start | center | flex-end | baseline; | Cross Axis Alignment | Aligns flex items along the cross axis | — |
flex-wrap: nowrap | wrap | wrap-reverse; | Multi-line Wrapping | Controls whether flex items wrap into multiple lines | — |
gap: 1rem 1.5rem; | Row / Column Gap | Sets gutter spacing between flex and grid items | — |
CSS Grid Layout Properties
Properties for 2-dimensional grid layouts.
| Syntax / Token | Name / Type | Description | Example / Notes |
|---|---|---|---|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | Responsive Auto Grid | Creates auto-wrapping responsive columns without media queries | — |
grid-template-columns: 1fr 2fr 1fr; | Fractional Columns (fr) | Splits available grid space by proportional fractional units | — |
grid-column: span 2; | Column Span | Item spans across 2 column tracks | — |
Modern CSS Math Functions
Fluid typography and responsive size calculations.
| Syntax / Token | Name / Type | Description | Example / Notes |
|---|---|---|---|
font-size: clamp(1rem, 2.5vw, 2.5rem); | Fluid Clamp | clamp(min, preferred, max) — keeps value bounded between min and max | — |
width: min(100%, 1200px); | Minimum Bound | Sets width to 100% on small screens, capping at 1200px on large viewports | — |
aspect-ratio: 16 / 9; | Aspect Ratio | Enforces video or card aspect ratio without padding hacks | — |
Frequently Asked Questions
Common questions and developer tips regarding css flexbox & grid property reference.
Explore More Cheat Sheets
All Cheat Sheets →Regular Expression (RegEx) Syntax & Tokens
A complete developer cheat sheet for RegEx tokens, character classes, anchors, lookaheads, lookbehinds, flags, and common production patterns with 1-click copy.
Crontab Syntax & Schedule Reference
Quick reference guide for Unix/Linux crontab schedule syntax, 5-field time breakdown, step values, special characters, and common cron presets.
HTTP Status Codes (1xx–5xx) Quick Reference
Comprehensive quick reference for all standard RFC HTTP status codes, REST API conventions, caching behaviors, and client/server error definitions.