Code

CSS

Colors

Color formats, opacity, gradients, and CSS custom properties.

Typography

Font stacks, sizing, weight, line-height, spacing, and truncation.

Sizing

Width, height, min/max, units, aspect-ratio, and clamp().

Box Model

Content, padding, border, margin, box-sizing, and margin collapse.

Flexbox

One-dimensional layout — direction, alignment, wrap, grow/shrink.

Grid

Two-dimensional layout — columns, rows, areas, auto-fill, and dense.

Responsive Design

Media queries, mobile-first, container queries, and fluid techniques.

Animation

@keyframes, timing functions, fill-mode, staggered sequences and more.

Generative Art with CSS

Pure CSS as a generative-art engine — layered gradients, blend modes, keyframe motion, and noise.

CSS Flexbox

One-dimensional layout — rows or columns with powerful alignment controls. MDN Reference

1. flex-direction

row (default)

row-reverse

column

.container {
  display: flex;
  flex-direction: row;         /* → */
  flex-direction: row-reverse; /* ← */
  flex-direction: column;      /* ↓ */
  flex-direction: column-reverse; /* ↑ */
}

2. justify-content (main axis)

flex-start

center

flex-end

space-between

space-around

space-evenly

.container {
  display: flex;
  justify-content: flex-start;
  justify-content: center;
  justify-content: flex-end;
  justify-content: space-between;
  justify-content: space-around;
  justify-content: space-evenly;
}

3. align-items (cross axis)

flex-start

center

flex-end

stretch (default)

.container {
  display: flex;
  align-items: flex-start;
  align-items: center;
  align-items: flex-end;
  align-items: stretch; /* default */
  align-items: baseline;
}

4. flex-wrap & gap

nowrap (default — items shrink)

Item 1

Item 2

Item 3

Item 4

wrap — items flow to next row

Item 1

Item 2

Item 3

Item 4

.container {
  display: flex;
  flex-wrap: nowrap;   /* default */
  flex-wrap: wrap;
  flex-wrap: wrap-reverse;

  gap: 1rem;           /* row & column gap */
  gap: 0.5rem 1rem;    /* row, column */
  row-gap: 0.5rem;
  column-gap: 1rem;
}

5. flex-grow, flex-shrink, flex-basis

flex-grow — proportional space distribution

grow: 1

grow: 2

grow: 1

flex shorthand

flex: 1

flex: 2

flex: 1

/* Applied to flex children */

/* flex: grow shrink basis */
.item { flex: 1 1 0; }
.item { flex: 1; }     /* shorthand */
.item { flex: auto; }  /* 1 1 auto */
.item { flex: none; }  /* 0 0 auto */

/* Individual */
flex-grow:   1;   /* claim spare space */
flex-shrink: 0;   /* don't shrink */
flex-basis:  200px; /* initial size */

6. align-self & order

self: start

self: center

self: end

self: stretch

order — DOM order: A B C, visual: B A C

A (order 2)

B (order 1)

C (order 3)

/* Override align-items per item */
.item {
  align-self: flex-start;
  align-self: center;
  align-self: flex-end;
  align-self: stretch;
  align-self: baseline;
}

/* Visual reordering (doesn't affect DOM/a11y) */
.item { order: -1; } /* move to front */
.item { order: 0; }  /* default */
.item { order: 1; }  /* move back */