如何使用 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 将样式应用于每个单独的项目item.

通过将 flex-wrap 属性设置为换行并将 justify-content 指定为 .list-item 中的 flex-start，我们确保项目在必要时换行，而保持他们在队列开头的合理性。

以上是如何使用 CSS 创建具有相同大小的项目的布局？的详细内容。更多信息请关注PHP中文网其他相关文章！