如何使用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;
}

您可以透過利用內聯Flexbox 來實現所需的佈局，如中所示提供的CSS解決方案：

.list-container { 顯示：內聯柔性； 彎曲方向：行； 調整內容：居中； } 。列表 { 顯示：柔性； 彎曲方向：列； } .列表項目{ 文字轉換：大寫； 背景顏色: rgb(200, 30, 40); 字體大小：1.3em； 文字對齊：左對齊； 內邊距：10px； 邊距：1 像素； 顯示：柔性； 彎曲方向：行； 彈性包裹：包裹； 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 容器的左邊緣對齊。這可確保最長的項目決定清單中所有項目的寬度。