让浏览器乖乖就范！详解解决 space-evenly 兼容性问题的两种方法

space-evenly 兼容性问题

space-evenly 属性是在 CSS3 中引入的，它允许子元素在主轴上均匀分布。例如，以下代码会将三个子元素均匀分布在容器中：

.container {
  display: flex;
  justify-content: space-evenly;
}

.item {
  width: 100px;
  height: 100px;
  background-color: red;
}

然而，space-evenly 属性存在着浏览器兼容性问题。在某些浏览器中，例如 IE11 和 Safari 11 之前版本，space-evenly 无法正常工作。在这些浏览器中，子元素不会均匀分布，而是会堆积在一起。

解决方法

解决 space-evenly 兼容性问题的办法有两种：

1. 使用 CSS3 的 calc() 函数

CSS3 的 calc() 函数允许我们动态计算值。我们可以使用 calc() 函数来计算出每个子元素的间距，然后使用 margin-right 或 margin-left 属性来设置子元素的间距。例如，以下代码会将三个子元素均匀分布在容器中，即使在 IE11 和 Safari 11 之前版本中也是如此：

.container {
  display: flex;
  justify-content: space-evenly;
}

.item {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-right: calc((100% - 300px) / 2);
}

2. 使用 Flexbox Gap 属性

Flexbox Gap 属性是 CSS3 中的新属性，它允许我们直接设置子元素之间的间距。例如，以下代码会将三个子元素均匀分布在容器中，即使在 IE11 和 Safari 11 之前版本中也是如此：

.container {
  display: flex;
  justify-content: space-evenly;
  gap: 10px;
}

.item {
  width: 100px;
  height: 100px;
  background-color: red;
}

结论

space-evenly 属性是一个非常有用的属性，它允许我们轻松地将子元素均匀分布在容器中。然而，space-evenly 存在着浏览器兼容性问题。我们可以使用 CSS3 的 calc() 函数或 Flexbox Gap 属性来解决 space-evenly 的兼容性问题。