css 让列表中的首尾元素靠两边，中间元素均匀分布

可以使用 Flexbox 来实现这个效果。具体的实现方法如下：

HTML:

<ul class="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

CSS:

.list {
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 0;
}

.list li:first-child {
  margin-right: auto;
}

.list li:last-child {
  margin-left: auto;
}

.list li:not(:first-child):not(:last-child) {
  flex-grow: 1;
}

使用 `display: flex` 将列表变成一个 Flexbox 容器，然后使用 `justify-content: space-between` 让容器中的元素靠两边对齐。

接着，使用 `margin-right: auto` 和 `margin-left: auto` 让第一个和最后一个元素分别靠左和靠右。

最后，使用 `flex-grow: 1` 让中间的元素均匀分布。`:not(:first-child):not(:last-child)` 选择器表示除了第一个和最后一个元素之外的所有元素。