Click any property to expand the explanation, visual diagram, and examples.
Flexbox
📐 Flex Container Properties
display: flex container
Enables flexbox on a container. Children become flex items.
.container {
display: flex; /* block-level flex container */
display: inline-flex; /* inline-level flex container */
}
/* Before flex: After flex: ┌──────────────┐ ┌──────────────┐ │ ┌──────────┐ │ │ ┌──┐┌──┐┌──┐│ │ │ Item 1 │ │ │ │ 1││ 2││ 3││ │ ├──────────┤ │ → │ └──┘└──┘└──┘│ │ │ Item 2 │ │ └──────────────┘ │ ├──────────┤ │ │ │ Item 3 │ │ │ └──────────┘ │ └──────────────┘ */
flex-direction container
Sets the main axis direction.
.container {
flex-direction: row; /* default: left → right */
flex-direction: row-reverse; /* right → left */
flex-direction: column; /* top → bottom */
flex-direction: column-reverse; /* bottom → top */
}
/* row: row-reverse: ┌──────────────┐ ┌──────────────┐ │ [1] [2] [3] │ │ [3] [2] [1] │ └──────────────┘ └──────────────┘column: column-reverse: ┌──────┐ ┌──────┐ │ [1] │ │ [3] │ │ [2] │ │ [2] │ │ [3] │ │ [1] │ └──────┘ └──────┘ */
justify-content container
Aligns items along the main axis.
.container {
justify-content: flex-start; /* default */
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
}
/* flex-start: flex-end: ┌──────────────┐ ┌──────────────┐ │[1][2][3] │ │ [1][2][3]│ └──────────────┘ └──────────────┘center: space-between: ┌──────────────┐ ┌──────────────┐ │ [1][2][3] │ │[1] [2] [3]│ └──────────────┘ └──────────────┘
space-around: space-evenly: ┌──────────────┐ ┌──────────────┐ │ [1] [2] [3] │ │ [1] [2] [3] │ └──────────────┘ └──────────────┘ */
align-items container
Aligns items along the cross axis.
.container {
align-items: stretch; /* default: fill container height */
align-items: flex-start; /* top */
align-items: flex-end; /* bottom */
align-items: center; /* middle */
align-items: baseline; /* text baseline */
}
/* stretch: center: ┌──────────────┐ ┌──────────────┐ │[111][222][333]│ │ │ │[111][222][333]│ │ [1] [2] [3]│ │[111][222][333]│ │ │ └──────────────┘ └──────────────┘flex-start: flex-end: ┌──────────────┐ ┌──────────────┐ │ [1] [2] [3] │ │ │ │ │ │ │ │ │ │ [1] [2] [3] │ └──────────────┘ └──────────────┘ */
flex-wrap container
Controls whether items wrap to new lines.
.container {
flex-wrap: nowrap; /* default: single line */
flex-wrap: wrap; /* wrap to new lines */
flex-wrap: wrap-reverse; /* wrap upward */
}
/* nowrap: wrap:
┌────────────────────┐ ┌──────────────┐
│[1][2][3][4][5][6] │ │ [1] [2] [3] │
└────────────────────┘ │ [4] [5] [6] │
└──────────────┘ */
gap container
Sets spacing between flex items (no outer margins needed).
.container {
gap: 16px; /* row and column gap */
gap: 16px 24px; /* row-gap column-gap */
row-gap: 16px;
column-gap: 24px;
}
/* gap: 16px; ┌──────────────────┐ │ [1] 16px [2] │ │ │ │ 16px │ │ │ │ [3] 16px [4] │ └──────────────────┘ */
align-content container
Aligns wrapped lines along the cross axis. Only works with
flex-wrap: wrap.
.container {
flex-wrap: wrap;
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-between;
align-content: space-around;
align-content: stretch; /* default */
}
📏 Flex Item Properties
flex-grow item
How much an item should grow relative to siblings.
.item { flex-grow: 0; } /* default: don't grow */
.item { flex-grow: 1; } /* take equal share of space */
.item-2 { flex-grow: 2; } /* take 2x share */
/* All flex-grow: 1: Item 2 flex-grow: 2: ┌──────────────────┐ ┌──────────────────┐ │ [ 1 ][ 2 ][3]│ │ [ 1 ][ 2 ][3]│ └──────────────────┘ └──────────────────┘ */
flex-shrink item
How much an item should shrink when space is tight.
.item { flex-shrink: 1; } /* default: can shrink */
.item { flex-shrink: 0; } /* don't shrink */
flex-basis item
The initial size of an item before growing/shrinking.
.item { flex-basis: auto; } /* default: use width/height */
.item { flex-basis: 200px; }
.item { flex-basis: 30%; }
/* Shorthand: flex: grow shrink basis /
.item { flex: 1; } / flex: 1 1 0% /
.item { flex: 0 0 200px; } / fixed 200px, no grow/shrink */
align-self item
Override
align-items for a single item.
.item { align-self: auto; } /* default: inherit */
.item { align-self: flex-start; }
.item { align-self: flex-end; }
.item { align-self: center; }
.item { align-self: stretch; }
/* align-items: flex-start, item-2 align-self: flex-end ┌──────────────────┐ │ [1] [2] [3] │ │ ↓ │ │ [2] │ └──────────────────┘ */
order item
Change visual order without changing HTML.
.item-1 { order: 3; }
.item-2 { order: 1; }
.item-3 { order: 2; }
/* Renders: [2] [3] [1] */
CSS Grid
🔲 Grid Container Properties
display: grid container
Enables CSS Grid on a container.
.container {
display: grid;
display: inline-grid;
}
grid-template-columns / rows container
Define column and row sizes.
.container {
grid-template-columns: 200px 1fr 1fr;
grid-template-rows: 100px auto;
}
/* 200px 1fr 1fr ┌──────┬──────┬──────┐ │ │ │ │ 100px ├──────┼──────┼──────┤ │ │ │ │ auto └──────┴──────┴──────┘ */
fr units container
Fractional units distribute remaining space.
grid-template-columns: 1fr 2fr 1fr; /* Total = 4fr. Columns get 25%, 50%, 25% */
/* 1fr 2fr 1fr ┌──────┬────────────┬──────┐ │ 25% │ 50% │ 25% │ └──────┴────────────┴──────┘ */
repeat() container
Shorthand for repeating track sizes.
grid-template-columns: repeat(3, 1fr); /* Same as: 1fr 1fr 1fr */grid-template-columns: repeat(3, 100px 50px); /* Same as: 100px 50px 100px 50px 100px 50px */
minmax() container
Set minimum and maximum track sizes.
grid-template-columns: minmax(200px, 1fr) 2fr; /* First column: at least 200px, at most 1fr */grid-template-columns: repeat(3, minmax(150px, 1fr));
auto-fill / auto-fit container
Create responsive grids without media queries.
/* auto-fill: creates as many tracks as fit, even if empty */ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));/* auto-fit: same but collapses empty tracks */ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
/* auto-fill (wide screen): ┌──────┬──────┬──────┬──────┐ │ item │ item │ │ │ ← empty tracks kept └──────┴──────┴──────┴──────┘ auto-fit (wide screen): ┌───────────┬───────────┐ │ item │ item │ ← items stretch └───────────┴───────────┘ */
grid-gap / gap container
Spacing between grid cells.
.container {
gap: 16px; /* row and column */
gap: 16px 24px; /* row-gap column-gap */
row-gap: 16px;
column-gap: 24px;
}
grid-template-areas container
Name grid areas for intuitive layouts.
.container {
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-template-columns: 200px 1fr 1fr;
grid-template-rows: 60px 1fr 40px;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
/* ┌────────────────────────┐ │ header │ ├────────┬────────────────┤ │sidebar │ main │ ├────────┴────────────────┤ │ footer │ └────────────────────────┘ */
📍 Grid Item Placement
grid-column / grid-row item
Place items by line numbers.
.item {
grid-column: 1 / 3; /* span columns 1-2 */
grid-row: 1 / 2; /* row 1 only */
}
/* Shorthand with span /
.item {
grid-column: span 2; / span 2 columns /
grid-row: 1 / span 3; / start at row 1, span 3 */
}
/* grid-column: 1 / 3 col1 col2 col3 ┌──────┬──────┬──────┐ │ item item │ │ ← spans 2 columns ├──────┼──────┼──────┤ │ │ │ │ └──────┴──────┴──────┘ */
grid-area item
Shorthand for row-start / column-start / row-end / column-end.
.item {
grid-area: 1 / 1 / 3 / 3;
/* row-start / col-start / row-end / col-end */
}
/* Or use named areas */
.item { grid-area: header; }
justify-items / align-items (Grid) container
Align all items within their grid cells.
.container {
justify-items: start | end | center | stretch; /* horizontal */
align-items: start | end | center | stretch; /* vertical */
place-items: center center; /* shorthand: align justify */
}
Quick Reference Table
| Property | Flexbox | Grid |
|---|---|---|
| Enable | display: flex | display: grid |
| Direction | flex-direction | grid-template-columns/rows |
| Wrap | flex-wrap | auto-fill / auto-fit |
| Main axis align | justify-content | justify-content |
| Cross axis align | align-items | align-items |
| Gap | gap | gap |
| Item sizing | flex: 1 | 1fr |
| Item placement | order | grid-column / grid-row |
| Named areas | — | grid-template-areas |
| Responsive | flex-wrap: wrap | repeat(auto-fit, minmax()) |
| Self align | align-self | justify-self / align-self |