Flexbox: Consistent Spacing Between Items with `gap`

.flex-container {
  display: flex;
  flex-wrap: wrap; /* Allows items to wrap to the next line */
  gap: 20px; /* Applies a 20px gap between all flex items */
  padding: 20px;
  border: 1px solid #ccc;
}

.flex-item {
  flex: 1 1 200px; /* Allows items to grow, shrink, and have a base width */
  background-color: #f0f0f0;
  padding: 20px;
  border: 1px dashed #999;
  text-align: center;
}

How it works: The `display: flex` property makes the container a flex container. `flex-wrap: wrap` allows items to move to the next line if space runs out. The `gap` property (which is relatively new for Flexbox but widely supported) directly sets the spacing between flex items, both horizontally and vertically, simplifying layout compared to using margins. `flex: 1 1 200px` ensures items are at least 200px wide but can grow and shrink to fill available space.