css如何实现根据子元素数量平均分配父元素宽度？

可以使用 CSS 网格布局和 fr 单位来实现根据子元素数量均分父元素宽度：

.parent-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 10px; /* 可选：在卡片之间添加间距 */
}

grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); 是一个 CSS 规则，用于定义网格容器的列布局：

• grid-template-columns 属性定义网格容器的列布局。
• repeat() 函数创建重复的列。
• auto-fit 关键字表示列将根据其内容自动调整大小。
• minmax(0, 1fr) 表示列的最小宽度为 0，最大宽度为容器可用空间的 1 分之 1。

因此，此规则将创建网格容器，其中列将根据其内容自动调整大小，但最小宽度为 0，最大宽度为容器可用空间的 1 分之 1。这允许列灵活地调整大小以适应其内容，同时确保它们不会变得太窄（由minmax()函数的第一个参数控制）或太宽（由minmax()函数的第二个参数控制）。

例如，以下 HTML 代码将创建五个均等宽度的列：

<div class="parent-container">
  <div>Column</div>
  <div>Column</div>
  <div>Column</div>
  <div>Column</div>
  <div>Column</div>
</div>

以下为grid-template-columns: repeat(auto-fit, minmax(0, 1fr));效果图：

以下为grid-template-columns: repeat(auto-fit, minmax(0, 0.1fr));效果图，由于已经设置了每一列的最大宽度为容器可用空间的0.1，所以五列最多占用一半的宽度，如下图所示：

注意： auto-fit 值仅在现代浏览器中受支持。对于旧浏览器，可以使用 minmax() 函数来实现类似的行为：

.parent-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  grid-auto-flow: column;
}