Fine-Tuning Flex Item Sizing with `flex`, `flex-grow`, `flex-shrink`, and `flex-basis`

.flex-container {
  display: flex;
  width: 100%;
  border: 1px solid #000;
}

.flex-item {
  padding: 20px;
  margin: 5px;
  background-color: lightblue;
  border: 1px solid blue;
}

.item-fixed {
  flex: 0 0 150px; /* flex-grow: 0, flex-shrink: 0, flex-basis: 150px */
}

.item-grow {
  flex: 1; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0% (default for 'flex: 1') */
}

.item-shrink-more {
  flex: 0 2 200px; /* flex-grow: 0, flex-shrink: 2, flex-basis: 200px */
}

How it works: The `flex` shorthand property, composed of `flex-grow`, `flex-shrink`, and `flex-basis`, is central to how flex items distribute space. `flex-grow` dictates how much an item will grow relative to others when there's extra space. `flex-shrink` defines how much an item will shrink relative to others when there's not enough space. `flex-basis` sets the initial main size of the item before any growing or shrinking occurs. Understanding these properties allows for intricate control over responsive item sizing and distribution.