如何使用 CSS 建立具有相同大小的項目的佈局？

使用CSS 創建具有相同大小的項目的佈局

目標是實現每個項目與最寬項目具有相同寬度的佈局元素，與內容無關。此佈局可以有多行並相應地包裹項目。

使用JavaScript

如提供的範例所示，JavaScript 可以透過計算之間的最大寬度輕鬆完成此任務項目，然後將此寬度分配給所有元素。

使用 CSS 實現相同的佈局

也可以使用純 CSS 實現此佈局，無需需要 JavaScript。操作方法如下：

.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 作為包裝清單的容器。
• . list 負責垂直顯示項目。
• .list-item 將樣式套用到每個單獨的項目。

透過設定flex-wrap 屬性來換行並指定justify-內容為.list-item 中的flex-start ，我們確保專案在必要時換行，同時保持其對行開頭的合理性。

以上是如何使用 CSS 建立具有相同大小的項目的佈局？的詳細內容。更多資訊請關注PHP中文網其他相關文章！