/* Flex shorthand: grow shrink basis */
.item {
  flex: 1 1 200px;
  /* grow: 1, shrink: 1, basis: 200px */
}

/* Common shorthands */
.item {
  flex: 1;           /* flex: 1 1 0 */
}

.item {
  flex: auto;        /* flex: 1 1 auto */
}

.item {
  flex: none;        /* flex: 0 0 auto */
}

.item {
  flex: 1 200px;     /* flex: 1 1 200px */
}

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

.item {
  flex-grow: 2;
  /* Grows twice as much as siblings */
}

/* Flex shrink */
.item {
  flex-shrink: 0;
  /* Doesn't shrink below flex-basis */
}

/* Flex basis */
.item {
  flex-basis: 200px;
  /* Base size before growing/shrinking */
}

/* Equal width columns */
.column {
  flex: 1;
  /* All columns equal width */
}

/* Sidebar + content */
.sidebar {
  flex: 0 0 250px;
  /* Fixed 250px width */
}

.content {
  flex: 1;
  /* Takes remaining space */
}

/* Variable growth */
.item:first-child {
  flex: 2;
  /* Grows twice as much */
}

.item:nth-child(n+2) {
  flex: 1;
  /* Normal growth */
}

/* Navigation with space */
nav {
  display: flex;
  gap: 20px;
}

nav a {
  flex: 0 0 auto;
  /* Buttons don't grow or shrink */
}

nav .spacer {
  flex: 1;
  /* Push buttons apart */
}