CSS Flex Cheatsheet

Flex Container Properties

display - Defines a flex container.

.container {
  display: flex;
}

flex-direction - Specifies the direction of the main axis.

.container {
  flex-direction: row;
}

.container {
  flex-direction: row-reverse;
}

flex-wrap - Determines whether flex items should wrap or not.

.container {
  flex-wrap: nowrap;
}

.container {
  flex-wrap: wrap;
}

justify-content - Aligns flex items along the main axis.

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

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

align-items - Aligns flex items along the cross axis.

.container {
  align-items: flex-start;
}

.container {
  align-items: stretch;
}

align-content - Aligns multiple lines of flex items along the cross axis.

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

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

Flex Item Properties

order: - Specifies the order of a flex item.

.flex-item {
  order: 2;
}

flex-grow: - Determines how much a flex item can grow relative to other items.

.flex-item {
  flex-grow: 2;
}

flex-shrink: - Specifies how much a flex item can shrink relative to other items.

.flex-item {
  flex-shrink: 0.5;
}

flex-basis: - Defines the initial size of a flex item.

.flex-item {
  flex-basis: 200px;
}

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

.flex-item {
  flex: 1 0 auto;
}

align-self: - Overrides the align-items value for a specific flex item.

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

Property	Description
display: flex	Makes an element a flex container.
flex-direction: row	Sets the main axis direction.
flex-wrap: wrap	Wraps flex items when they overflow the container.
justify-content: flex-start	Aligns flex items on the main axis.
align-items: stretch	Aligns flex items on the cross axis.
order	Specifies the order of flex items.
flex-grow	Specifies how much a flex item can grow.
flex-shrink	Specifies how much a flex item can shrink.
flex-basis	Specifies the initial size of a flex item.

Example:

// Makes the div a flex container
div {
  display: flex;
}

// Sets the main axis direction to row
div {
  flex-direction: row;
}

// Wraps flex items when they overflow the container
div {
  flex-wrap: wrap;
}

// Aligns flex items on the main axis to the start
div {
  justify-content: flex-start;
}

// Aligns flex items on the cross axis to stretch
div {
  align-items: stretch;
}

// Specifies the order of flex items
div {
  order: 2;
}

// Specifies how much a flex item can grow
div {
  flex-grow: 1;
}

// Specifies how much a flex item can shrink
div {
  flex-shrink: 1;
}

// Specifies the initial size of a flex item
div {
  flex-basis: 100px;
}