CSS Flexbox Cheat Sheet

Flexbox Basics

Flexbox is a one-dimensional layout method for arranging items in rows or columns. Set display: flex on a container to enable it.

.container {
  display: flex;           /* enables flex context */
  flex-direction: row;     /* main axis direction */
  justify-content: center; /* align on main axis */
  align-items: center;     /* align on cross axis */
  gap: 16px;               /* space between items */
}

Tip: The main axis follows flex-direction (default: horizontal). The cross axis runs perpendicular to it.

Container Properties

display

flex inline-flex

Defines a flex container. inline-flex makes the container inline-level.

flex-direction

row row-reverse column column-reverse

Sets the direction of the main axis. row is left-to-right, column is top-to-bottom.

flex-wrap

nowrap wrap wrap-reverse

Controls whether items wrap to new lines. Default is nowrap (single line).

flex-flow

Shorthand: flex-direction + flex-wrap

Example: flex-flow: row wrap sets direction to row and enables wrapping.

justify-content

flex-start flex-end center space-between space-around space-evenly

Aligns items along the main axis.

align-items

stretch flex-start flex-end center baseline

Aligns items along the cross axis (single line).

align-content

stretch flex-start flex-end center space-between space-around

Aligns multiple lines on the cross axis. Only works with flex-wrap: wrap.

gap / row-gap / column-gap

<length>

Sets spacing between flex items without affecting outer edges. Example: gap: 16px.

justify-content Visual

Value	Behavior
`flex-start`	Items packed to the start
`flex-end`	Items packed to the end
`center`	Items centered along main axis
`space-between`	Equal space between items, no space at edges
`space-around`	Equal space around each item (half-size at edges)
`space-evenly`	Equal space between all items and edges

Item Properties

order

<integer> (default: 0)

Controls the order of items. Lower values appear first. Items with the same order follow source order.

flex-grow

<number> (default: 0)

How much an item should grow relative to siblings. 1 means it takes available space.

flex-shrink

<number> (default: 1)

How much an item should shrink when space is limited. 0 prevents shrinking.

flex-basis

auto <length> <percentage> content

Initial size before growing/shrinking. auto uses the item's width/height.

flex

Shorthand: flex-grow flex-shrink flex-basis

flex: 1 = flex: 1 1 0%. flex: auto = flex: 1 1 auto. flex: none = flex: 0 0 auto.

align-self

auto flex-start flex-end center baseline stretch

Overrides align-items for a single item on the cross axis.

Tip: Always use the flex shorthand instead of setting flex-grow, flex-shrink, and flex-basis individually. It sets smart defaults.

Common flex Shorthand Values

Shorthand	Equivalent	Use Case
`flex: 1`	`flex: 1 1 0%`	Item grows and shrinks equally, ignoring content size
`flex: auto`	`flex: 1 1 auto`	Item grows/shrinks based on its content size
`flex: none`	`flex: 0 0 auto`	Item is fully inflexible (fixed size)
`flex: 0 1 auto`	(initial value)	Item can shrink but won't grow
`flex: 2`	`flex: 2 1 0%`	Takes twice the space of `flex: 1` siblings

Alignment Deep Dive

Property	Axis	Applies To	Description
`justify-content`	Main	Container	Distribute items along main axis
`align-items`	Cross	Container	Align items on cross axis (single line)
`align-content`	Cross	Container	Distribute lines on cross axis (multi-line)
`align-self`	Cross	Item	Override `align-items` for one item
`gap`	Both	Container	Space between items (not at edges)
`margin: auto`	Both	Item	Push item away from neighbors / absorb extra space

Tip: margin-left: auto on a flex item pushes it (and everything after) to the right — great for navigation layouts with a logo on the left and links on the right.

Common Patterns

Center an element (horizontal + vertical)

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Sticky footer

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1;  /* main takes all available space */
}

Navigation bar

.navbar {
  display: flex;
  align-items: center;
  gap: 16px;
}
.nav-links {
  margin-left: auto;  /* push links to right */
  display: flex;
  gap: 12px;
}

Equal-width columns

.row {
  display: flex;
  gap: 16px;
}
.col {
  flex: 1;  /* all columns share space equally */
}

Sidebar layout (fixed + fluid)

.layout {
  display: flex;
}
.sidebar {
  flex: 0 0 250px;  /* fixed 250px, no grow/shrink */
}
.content {
  flex: 1;           /* fluid, takes remaining space */
}

Card grid with wrapping

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.card {
  flex: 1 1 300px;  /* min 300px, grow to fill */
}