CSS Cheatsheet

Interactive CSS reference tools with live previews, documentation, and code generation

About CSS Flexbox

Flexbox (Flexible Box Layout) is a one-dimensional layout method for arranging items in rows or columns. It provides an efficient way to distribute space and align content, even when their size is unknown or dynamic.

Key Concepts:
  • Main Axis: The primary axis along which flex items are laid out (controlled by flex-direction)
  • Cross Axis: The axis perpendicular to the main axis
  • Flex Container: The parent element with display: flex
  • Flex Items: The direct children of the flex container

Quick Presets

Flexbox Properties

Defines the main axis direction

Aligns items along main axis

Aligns items along cross axis

Controls wrapping behavior

Spacing between flex items

Visual Preview

1
2
3
4
5

Generated CSS

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 10px;
}

Property Reference

flex-direction

Establishes the main axis, defining the direction flex items are placed in the flex container.
•

row
- Left to right (default)
•
row-reverse
- Right to left
•
column
- Top to bottom
•
column-reverse
- Bottom to top

justify-content

Defines alignment along the main axis and distributes extra space.
•

flex-start
- Items packed at start
•
flex-end
- Items packed at end
•
center
- Items centered
•
space-between
- Even spacing, first/last at edges
•
space-around
- Even spacing around items
•
space-evenly
- Equal spacing between all items

align-items

Defines how flex items are laid out along the cross axis.
•

stretch
- Items stretched to fill container (default)
•
flex-start
- Items at cross-start
•
flex-end
- Items at cross-end
•
center
- Items centered on cross-axis
•
baseline
- Items aligned by text baseline

flex-wrap

Controls whether items wrap to new lines when they exceed container width.
•

nowrap
- All items on one line (default)
•
wrap
- Items wrap to multiple lines
•
wrap-reverse
- Items wrap in reverse order

gap

Sets spacing between flex items. Replaces the need for margins on items. Supports px, rem, em, and % units.

Common Use Cases

  • Navigation bars: Use justify-content: space-between for even spacing
  • Card layouts: Use flex-wrap: wrap with gap for responsive grids
  • Centering content: Use justify-content: center and align-items: center
  • Form layouts: Use flex-direction: column with appropriate gaps
  • Toolbars: Use align-items: center to align icons and text