Distribute Items Evenly in a Row with Flexbox

.nav-bar {
  display: flex;
  justify-content: space-between; /* Items evenly spaced, first at start, last at end */
  /* Other useful values for justify-content:
     space-around: Items with space before, between, and after.
     space-evenly: Items with equal space around them.
     center: Items grouped in the center.
     flex-start: Items grouped at the start.
     flex-end: Items grouped at the end.
  */
  align-items: center; /* Vertically center items */
  background-color: #444;
  padding: 10px 20px;
}

.nav-item {
  color: white;
  text-decoration: none;
  padding: 8px 15px;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.nav-item:hover {
  background-color: #555;
}

How it works: This snippet demonstrates how to effectively distribute items, such as navigation links or icons, evenly across a horizontal space using CSS Flexbox. By applying `display: flex` to the parent container (`.nav-bar`), its direct children become flex items. The `justify-content` property is then used to control their distribution along the main axis. `justify-content: space-between` places the first item at the start, the last item at the end, and distributes the remaining space evenly between them. Other values like `space-around` and `space-evenly` offer different spacing behaviors, providing flexibility for various layout needs, while `align-items: center` ensures vertical alignment.