A definitive reference for frontend engineers and web designers detailing CSS Flexbox and Grid layout properties, modern perceptually uniform color spaces (OKLCH), responsive media query breakpoints, and selector specificity calculations.
Essential reference equations governing calculations in this domain.
\text{Specificity} = (\text{Inline}, \text{IDs}, \text{Classes/Attrs/Pseudos}, \text{Elements/Pseudos})Represented as a 4-part tuple (e.g. 0,1,2,1). Higher columns always override lower columns regardless of count.
\text{Pixels (px)} = \text{REM Value} \times \text{Root Font Size (Default 16px)}Default 1rem equals 16px in all modern browsers unless changed on :root { font-size: ... }.
\text{font-size} = \text{clamp}(\text{MIN},\ \text{VAL},\ \text{MAX})Keeps font size fluidly responsive between min and max bounds without breakpoint jumps.
Complete container and item flexbox layout rules.
| Property | Applies To | Common Values | Layout Behavior Summary |
|---|---|---|---|
| display: flex | inline-flex | Container | flex, inline-flex | Activates flexbox context for all immediate direct children. |
| flex-direction | Container | row, row-reverse, column, column-reverse | Establishes main axis along which flex items are placed. |
| justify-content | Container | flex-start, center, flex-end, space-between, space-around, space-evenly | Distributes free space along the MAIN axis. |
| align-items | Container | stretch, flex-start, center, flex-end, baseline | Controls item alignment across the CROSS axis. |
| flex-wrap | Container | nowrap, wrap, wrap-reverse | Controls whether items are forced into single line or can wrap. |
| gap / row-gap / column-gap | Container | 1rem, 16px, 1.5vw | Creates gutter space strictly between flex items (no outer margin). |
| flex-grow | Item | 0 (default), 1, 2, ... | Proportional ability for item to expand to fill remaining space. |
| flex-shrink | Item | 1 (default), 0 (prevents shrink) | Ability for item to shrink when container space is constricted. |
| flex-basis | Item | auto, 0, 250px, 30% | Default initial size before remaining space is distributed. |
Two-dimensional grid layout container and track placement properties.
| Property | Applies To | Syntax Example | Description & Layout Impact |
|---|---|---|---|
| grid-template-columns | Container | repeat(3, 1fr) / repeat(auto-fit, minmax(280px, 1fr)) | Defines column tracks using fixed, percentage, or fractional (fr) units. |
| grid-template-rows | Container | auto 1fr auto | Defines row tracks (e.g. Header, Main Content, Footer layout). |
| grid-auto-flow | Container | row, column, dense | Controls automatic placement algorithm for items not explicitly positioned. |
| gap | Container | 1.5rem / 24px | Sets horizontal and vertical grid gutters simultaneously. |
| grid-column | Item | span 2 / 1 / -1 | Shorthand for grid-column-start and grid-column-end. |
| grid-row | Item | span 3 / 2 / 4 | Shorthand for grid-row-start and grid-row-end. |
sRGB vs modern wide-gamut (Display P3) color models.
| Color Model | Syntax Example | Gamut Range | Perceptual Uniformity | Modern Use Recommendation |
|---|---|---|---|---|
| OKLCH | oklch(0.7 0.15 150) | Wide Gamut (P3+) | Excellent (Perceptually Uniform) | Recommended for modern web palettes; predictable contrast. |
| HSL | hsl(210 100% 50%) | Standard sRGB | Poor (Yellow appears brighter than blue at 50% L) | Legacy familiar model, but lighting transitions are uneven. |
| Hexadecimal | #3b82f6 / #3b82f6cc | Standard sRGB | None | Standard compact code notation; poor for procedural color math. |
| RGB / RGBA | rgb(59 130 246 / 0.8) | Standard sRGB | None | Universal support; raw channel values. |
| Display P3 | color(display-p3 1 0 0) | Wide Gamut (+50% colors) | Moderate | High-end displays (Apple, modern OLED) for ultra-vivid tones. |
Industry standard media query breakpoints across modern viewports.
| Breakpoint | Min Width | Target Device Classes | Design Focus |
|---|---|---|---|
| sm | 640px | Large smartphones (landscape), small phablets | Expanded single-column layout, compact cards |
| md | 768px | Standard tablets (portrait), iPad Mini | Two-column grids, collapsible sidebars, tablet nav |
| lg | 1024px | Small laptops, iPad Pro (landscape), desktop | Full desktop layout, sidebars visible, 3-column grids |
| xl | 1280px | Standard desktop monitors, MacBook Pro | Max container max-w-7xl, generous padding & gutters |
| 2xl | 1536px | Large widescreen monitors & 4K displays | Ultra-wide viewing, 4-column cards, multi-column dashboard |
Interactive calculators and converters for this suite are being activated in upcoming rollout waves.
All 100 tools in this category have passed strict client-side verification and are scheduled for progressive rollout across upcoming waves.
Clear technical and regulatory explanations regarding these parameters and formulas.