🔧 Flexbox CSS: Cheatsheet

/* Styles for the parent container */
.parent {
  /* Direction of the main axis */
  flex-direction: column;
  /* Spacing between items along the main axis */
  justify-content: space-evenly;
  /* Alignment of items along the cross axis */
  align-items: flex-start;
  /* How items should wrap if they exceed the container */
  flex-wrap: wrap;
  /* Alignment of wrapped lines along the cross axis */
  align-content: flex-start;
  /* Spacing between child elements */
  gap: 1em;
}

/* Styles for the child items */
.child {
  /* Ability of a flex item to grow */
  flex-grow: 1;
  /* Ability of a flex item to shrink */
  flex-shrink: 0;
  /* Initial size of a flex item */
  flex-basis: 0;
  /* Shorthand for flex-grow, flex-shrink, and flex-basis */
  flex: 1;
  /* Alignment of a single item along the cross axis */
  align-self: baseline;
  /* Order of appearance */
  order: -1;
}