Distributing Space Between Flex Items

.flex-nav {
  display: flex;
  /* Option 1: Space between items, first and last flush with edges */
  justify-content: space-between;
  
  /* Option 2: Space around items, half space at edges */
  /* justify-content: space-around; */
  
  /* Option 3: Equal space around items, including edges */
  /* justify-content: space-evenly; */

  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #444;
}

.flex-nav li a {
  display: block;
  padding: 10px 15px;
  color: white;
  text-decoration: none;
  white-space: nowrap; /* Prevent text wrapping */
}

How it works: This snippet demonstrates various ways to distribute space between flex items using the `justify-content` property. When `display: flex` is applied to a container, `justify-content` controls how items are distributed along the main axis. `space-between` places equal space between items, pushing the first item to the start and the last to the end. `space-around` distributes space evenly around items, meaning the space at the ends is half of the space between items. `space-evenly` ensures equal space between items and also at both ends, providing the most balanced distribution. These options are vital for creating clean and adaptable layouts like navigation bars or button groups.