CSS Flexbox Properties

20 Essential CSS Flexbox Properties

A visual reference cheat sheet for mastering one-dimensional layouts in modern web design.

"Flexbox makes one-dimensional layouts simple, powerful, and flexible. Build better layouts with Flexbox!"

Container Properties (Flex Parent)

1

display: flex

Defines a flex container and enables a flex context for all its direct children.

.container {
  display: flex;
}

2

flex-direction

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

.container {
  flex-direction: row;
}

3

flex-wrap

Specifies whether flex items are forced onto a single line or can wrap onto multiple lines.

.container {
  flex-wrap: wrap;
}

4

flex-flow

A convenient shorthand property for setting both flex-direction and flex-wrap.

.container {
  flex-flow: row wrap;
}

5

justify-content

Aligns flex items along the main axis (horizontally by default) and distributes extra space.

.container {
  justify-content: center;
}

6

align-items

Defines the default behavior for how flex items are laid out along the cross axis (vertically).

.container {
  align-items: center;
}

7

align-content

Aligns multiple lines within the flex container along the cross axis when extra space exists.

.container {
  align-content: space-between;
}

14

gap

Explicitly controls the space between flex items, combining row-gap and column-gap.

.container {
  gap: 20px;
}

15

row-gap

Sets the specific size of the gap (gutter) between flex container rows.

.container {
  row-gap: 20px;
}

16

column-gap

Sets the specific size of the gap (gutter) between flex container columns.

.container {
  column-gap: 20px;
}

Item Properties (Flex Children)

8

order

Controls the visual order in which flex items appear, independent of document source order.

.item {
  order: 2;
}

9

flex-grow

Defines the ability for a flex item to grow relative to the rest of the items if space is available.

.item {
  flex-grow: 1;
}

10

flex-shrink

Defines the ability for a flex item to shrink relative to the rest of the items when space is tight.

.item {
  flex-shrink: 1;
}

11

flex-basis

Defines the default initial size of an element before remaining space is distributed.

.item {
  flex-basis: 200px;
}

12

flex

Shorthand for flex-grow, flex-shrink, and flex-basis combined.

.item {
  flex: 1 1 200px;
}

13

align-self

Allows the default alignment (from align-items) to be overridden for individual flex items.

.item {
  align-self: flex-end;
}

Common Alignment Values

17

flex-start

Items are packed flush toward the start edge of the alignment container along the axis.

.container {
  justify-content: flex-start;
}

18

flex-end

Items are packed flush toward the end edge of the alignment container along the axis.

.container {
  justify-content: flex-end;
}

19

space-between

Items are evenly distributed; the first item touches the start edge and the last touches the end.

.container {
  justify-content: space-between;
}

20

space-around

Items are distributed with equal space around them (spaces between items are double the edge spacing).

.container {
  justify-content: space-around;
}