/* Longhand */
.item {
  flex-basis: 200px;    /* start at 200px */
  flex-grow: 1;         /* grow if there's space */
  flex-shrink: 1;       /* shrink if needed */
}

/* Shorthand: flex: [grow] [shrink] [basis] */
.item {
  flex: 1 1 200px;
}

/* Common shortcuts */
.item {
  flex: 1;              /* 1 1 0% - grow and shrink equally, fill space */
}

.item {
  flex: 0 0 auto;       /* no grow, no shrink, auto size (default) */
}

.item {
  flex: 0 1 auto;       /* no grow, shrink, auto size */
}

<!-- Three flex items with flex-basis -->
<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

.container {
  display: flex;
  width: 600px;
}

/* All items start at 200px (basis) */
.item {
  flex-basis: 200px;  /* each item is 200px */
  /* 3 × 200px = 600px (fills container exactly) */
}

<!-- Result: [200px] [200px] [200px] -->

/* With growth */
.item {
  flex-basis: 200px;
  flex-grow: 1;  /* grow equally to fill extra space */
}

<!-- If container is 900px: 900px ÷ 3 = 300px each -->
<!-- Result: [300px] [300px] [300px] -->

/* With auto basis (content size) */
.item {
  flex-basis: auto;  /* use content width */
}

<!-- Items size to their content, then grow/shrink -->
<!-- [Content 1] [Content 2] [Content 3] (then grow if room) -->

<!-- Container: 1000px, items have 200px basis each -->
.container {
  display: flex;
  width: 1000px;
}

.item {
  flex-basis: 200px;
  /* Total basis: 3 × 200px = 600px */
  /* Extra space: 1000px - 600px = 400px */
}

/* All items grow equally */
.item {
  flex-grow: 1;
  /* Each item takes 400px ÷ 3 ≈ 133px of extra space */
  /* Each item becomes: 200px + 133px ≈ 333px */
}

<!-- Result: [333px] [333px] [333px] -->

/* Unequal growth */
.item:nth-child(1) {
  flex-grow: 1;  /* takes 1 part of 400px */
}

.item:nth-child(2) {
  flex-grow: 2;  /* takes 2 parts of 400px */
}

.item:nth-child(3) {
  flex-grow: 1;  /* takes 1 part of 400px */
}

/* Total parts: 1 + 2 + 1 = 4 */
/* Item 1: 200px + (1/4 × 400px) = 300px */
/* Item 2: 200px + (2/4 × 400px) = 400px */
/* Item 3: 200px + (1/4 × 400px) = 300px */

<!-- Result: [300px] [400px] [300px] -->

<!-- Container: 400px, items want 200px each -->
.container {
  display: flex;
  width: 400px;
}

.item {
  flex-basis: 200px;
  /* Total needed: 3 × 200px = 600px */
  /* Not enough space: 400px */
  /* Shortage: 600px - 400px = 200px */
}

/* All items shrink equally */
.item {
  flex-shrink: 1;
  /* Each item loses 200px ÷ 3 ≈ 67px */
  /* Each item becomes: 200px - 67px ≈ 133px */
}

<!-- Result: [133px] [133px] [133px] -->

/* Unequal shrinkage */
.item:nth-child(1) {
  flex-shrink: 1;  /* loses 1 part */
}

.item:nth-child(2) {
  flex-shrink: 0;  /* doesn't shrink! stays 200px */
}

.item:nth-child(3) {
  flex-shrink: 1;  /* loses 1 part */
}

/* Item 2 stays 200px, others share the shortage */
<!-- Result: [150px] [200px] [50px] -->

/* Prevent shrinking */
.item {
  flex-shrink: 0;  /* won't shrink below flex-basis */
}

/* Equal width items — flex: 1 */
.item {
  flex: 1;  /* 1 1 0% - grow and shrink equally */
}

<!-- All items take equal space -->

/* Fixed width item, rest fill space */
.sidebar {
  flex: 0 0 250px;  /* fixed 250px, no grow/shrink */
  background: #f5f5f5;
}

.content {
  flex: 1;  /* grows to fill remaining space */
}

<!-- Result: [250px fixed] [remaining space] -->

/* Three item layout */
.left {
  flex: 0 0 200px;   /* fixed width */
}

.middle {
  flex: 1;           /* takes remaining space */
}

.right {
  flex: 0 0 150px;   /* fixed width */
}

<!-- Result: [200px] [space] [150px] -->

/* Flexible items that never shrink below content */
.item {
  flex: 1 0 auto;    /* grow if room, never shrink below content */
  min-width: 0;      /* important: allows flex to work with long text */
}