Flexbox Cheat Sheet

Flexbox (Flexible Box Layout) is a layout model in CSS that allows you to design complex layouts more efficiently and with less code. Here’s a Flexbox cheat sheet:

Container Properties

Display:

.container {
  display: flex;
}

Flex Direction:

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

Flex Wrap:

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

Justify Content:

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

Align Items:

.container {
  align-items: stretch | flex-start | flex-end | center | baseline;
}

Align Content:

.container {
  align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}

Item Properties

Order:

.item {
  order: <integer>;
}

Flex Grow:

.item {
  flex-grow: <number>; /* Default: 0 */
}

Flex Shrink:

.item {
  flex-shrink: <number>; /* Default: 1 */
}

Flex Basis:

.item {
  flex-basis: <length> | auto; /* Default: auto */
}

Align Self:

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Shortcuts

Flex Property (Shorthand):

.item {
  flex: <flex-grow> <flex-shrink> <flex-basis>;
}

Flex Flow (Shorthand for Flex Direction and Flex Wrap):

.container {
  flex-flow: row nowrap;
}

Examples

Equal-width Columns:

.container {
  display: flex;
}

.item {
  flex: 1;
}

Centering Items:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Responsive Flex Container:

.container {
  display: flex;
  flex-wrap: wrap;
}

Vertical Centering:

.container {
  display: flex;
  align-items: center;
}

Reverse Order:

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

This cheat sheet provides a quick reference for common Flexbox properties. Flexbox is highly versatile, and understanding these properties allows you to create flexible and responsive layouts with ease. For more detailed information, refer to the official CSS Flexbox documentation.