CSS 将宽度平等地分配给子组件

当我们需要平分宽度给子组件时，我们可以使用以下方法。

首先，我们使用 flexbox 布局来排列组件，确保它们在一行中并平分宽度。

.container {
  display: flex;
  justify-content: space-between;
  /* 可选：用于堆叠子组件在同一行 */
  flex-wrap: wrap;
}

接下来，我们给子组件一个相同的宽度百分比。为了确保子组件不排除在布局之外，我们可以添加一个 box-sizing 属性，设置为 border-box，这将包括任何边框和填充在内。

.item {
  width: 33.33%;
  box-sizing: border-box;
}

在这个例子中，我们将宽度平分给三个子组件。您可以根据需要更改百分比。

综上所述，以下是完整的 CSS 代码：

.container {
  display: flex;
  justify-content: space-between;
  /* 可选：用于堆叠子组件在同一行 */
  flex-wrap: wrap;
}

.item {
  width: 33.33%;
  box-sizing: border-box;
}

现在您可以将这些 CSS 代码应用于您的项目中，以便轻松地将宽度平均分配给您的子组件。

请注意，这种方法可能与某些具有固定宽度的子组件不兼容，因此请谨慎使用。