如何使用 CSS 设置最宽元素的统一项目宽度

您可以通过利用内联 Flexbox 来实现所需的布局，如中所示提供的CSS解决方案：

.list-container {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
}

.list {
  display: flex;
  flex-direction: column;
}

.list-item {
  text-transform: capitalize;
  background-color: rgb(200, 30, 40);
  font-size: 1.3em;
  text-align: left;
  padding: 10px;
  margin: 1px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

在此 CSS 中，我们将 .list-container 设置为内联 Flexbox 显示，确保其子 .list 元素水平显示。 .list 元素具有垂直 Flexbox 显示，允许其子 .list-item 元素垂直堆叠。

至关重要的是，.list-item 元素将其 flex-wrap 属性设置为换行。这意味着当它们无法容纳在 .list 容器中的一行中时，它们将自动换行到下一行。

此外，我们将 .list- 的 justify-content 属性设置为 flex-start item 元素，这使它们与其 .list 容器的左边缘对齐。这可确保最长的项目决定列表中所有项目的宽度。

通过实现此 CSS，您可以创建一个布局，其中所有项目的宽度与最宽元素的宽度相同，从而确保一致且美观外貌。