Granular Flex Item Sizing with the `flex` Shorthand

.flex-container {
  display: flex;
  gap: 10px;
  padding: 15px;
  background-color: #f5f5f5;
}

.item-1 {
  flex: 1 1 100px; /* grow, shrink, basis */
  background-color: #add8e6;
  padding: 10px;
}

.item-2 {
  flex: 2 0 150px; /* Grows twice as much as item-1, won't shrink */
  background-color: #90ee90;
  padding: 10px;
}

.item-3 {
  flex: 0 1 auto; /* Won't grow, can shrink, initial size based on content */
  background-color: #ffb6c1;
  padding: 10px;
}

How it works: The `flex` shorthand property (`flex: <flex-grow> <flex-shrink> <flex-basis>;`) offers precise control over how individual flex items behave. `flex-grow` (first value) determines how much an item will grow relative to other items if there's extra space. `flex-shrink` (second value) determines how much an item will shrink relative to other items if there isn't enough space. `flex-basis` (third value) sets the item's initial size before any growing or shrinking occurs. This snippet demonstrates how to assign different `flex` values to items for varied distribution of space.