How can I distribute flex items evenly without using auto margins?

Use justify-content on the flex container. For equal gaps between items and items aligned to the container edges, choose space-between. For equal gaps between items and at the two edges, choose space-evenly. space-around gives each item equal surrounding space, which leaves edge gaps half the size of the between-item gaps. These values distribute positive free space along the main axis, which follows flex-direction. [S1]

For example, assuming a container wider than its three items combined:

.toolbar {
  display: flex;
  justify-content: space-between;
}

Replace space-between with space-around or space-evenly to change the spacing pattern. The result depends on the container’s available space and flex sizing. [S1]

Use space-evenly. It distributes the available leftover space into equal gaps between adjacent items and at both ends of the container. [S1] For instance, with three items, picture four equal spaces: one before the first item, two between items, and one after the last item. These spacing values distribute free space; if the items take up all the available main-axis space, there is no positive leftover space to distribute. [S1]

For flush outer items with equal gaps only between neighboring items, use space-between. For equal surrounding allocation around each item, use space-around; its edge gaps are half the gaps between items. [S1]

A quick chooser:

1. Items at the edges; equal gaps only between them: space-between.
2. Equal gaps between items and at both edges: space-evenly.
3. Equal space allocated around each item, with smaller edge gaps: space-around.
4. Keep the group at the start, end, or center instead: use flex-start/start, flex-end/end, or center. [S1]

These options act along the main axis, so a column flex container distributes space vertically rather than horizontally. [S1]

First check whether the container has positive leftover space after the items have been laid out. justify-content cannot create extra room when there is no positive free space. [S1] Also confirm the container’s flex-direction: that determines the main axis, so a spacing change may appear vertically in a column rather than horizontally in a row. [S1] If your goal is for items to grow and fill available room, justify-content is not the control for that; item growth is controlled by flex growth. [S1]

Use this as a starting point, adjusting the selector and value for your layout:

.item-list {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

The outcome depends on available space, direction, and flex sizing. [S1]