Display Property

/* Set the container to a flexbox */
.container {
  display: flex;
}

Flex Direction Property

/* Set the main axis direction */
.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

Flex Wrap Property

/* Allow items to wrap */
.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

Flex Flow Property

/* Combine flex-direction and flex-wrap */
.container {
  flex-flow: row wrap;
}

Justify Content Property

/* Align items along the main axis */
.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

Align Items Property

/* Align items along the cross axis */
.container {
  align-items: stretch | flex-start | flex-end | center | baseline;
}

Align Content Property

/* Align wrapped lines along the cross axis */
.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

Gap Property

/* Set the gap between flex items */
.container {
  gap: 10px;
}

Order Property

/* Change the order of flex items */
.item {
  order: 2;
}

Flex Grow Property

/* Allow an item to grow to fill available space */
.item {
  flex-grow: 1;
}