Flexbox Cheat Sheet
| Property / Value | Effect |
|---|---|
display: flex; | Enable flexbox on container |
flex-direction: row | column | Main axis direction |
justify-content: flex-start | center | space-between | space-around | space-evenly | Align items along main axis |
align-items: stretch | center | flex-start | flex-end | baseline | Align items along cross axis |
flex-wrap: wrap | nowrap | Allow items to wrap to new lines |
gap: 16px | Space between flex items (modern) |
flex: 1 | Item grows to fill available space |
flex: 0 0 200px | Fixed width item (no grow/shrink) |
align-self: center | Override alignment for single item |
order: 2 | Change visual order of item |
CSS Grid Cheat Sheet
| Property / Value | Effect |
|---|---|
display: grid; | Enable grid on container |
grid-template-columns: repeat(3, 1fr) | Three equal columns |
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) | Responsive auto-fill columns |
grid-template-rows: auto 1fr auto | Header / content / footer rows |
gap: 20px | Row and column gap |
grid-column: 1 / -1 | Item spans full width |
grid-column: span 2 | Item spans 2 columns |
place-items: center | Center items (shorthand for align + justify) |
grid-area: header | Assign item to named area |
grid-template-areas: "h h" "s m" "f f" | Define named layout areas |
Custom Properties (Variables)
| Syntax | Description |
|---|---|
:root { --color-primary: #264DE4; } | Define global variable |
color: var(--color-primary); | Use a variable |
var(--color, #fallback) | Use variable with fallback |
--spacing-sm: 8px; --spacing-md: 16px; | Spacing scale pattern |
calc(100% - var(--sidebar-width)) | Math with variables |
@media (prefers-color-scheme: dark) | Dark mode detection |
Modern CSS Selectors
| Selector | Matches |
|---|---|
:is(h1, h2, h3) | Match any of the listed selectors |
:where(header, footer) a | Like :is() but zero specificity |
:not(.active) | Exclude elements matching selector |
:has(> img) | Parent with direct image child |
:focus-visible | Show focus ring only for keyboard nav |
:empty | Element with no children |
:nth-child(odd) | Every odd child |
a[href^="https"] | Attribute starts with value |
a[href$=".pdf"] | Attribute ends with value |
a[href*="zach"] | Attribute contains value |
Useful CSS Snippets
| Snippet | Purpose |
|---|---|
* { box-sizing: border-box; } | Global border-box reset (use always) |
img { max-width: 100%; height: auto; } | Responsive images |
text-overflow: ellipsis; white-space: nowrap; overflow: hidden; | Truncate text with ellipsis |
aspect-ratio: 16 / 9; | Maintain aspect ratio |
object-fit: cover; | Image fills container without distortion |
position: sticky; top: 0; | Sticky header/nav |
scroll-behavior: smooth; | Smooth anchor scrolling (on :root) |
user-select: none; | Prevent text selection |
pointer-events: none; | Disable mouse interaction |
visibility: hidden; | Hide but preserve layout space |