Flex-Wrap布局下元素未对齐起始位置问题求助

问题根源是浏览器给<ul>标签设置了默认的margin-left，导致整个列表容器没有贴紧父元素左边缘，看起来第一个标签未从起始位置开始。

修复步骤 #

1. 给.list添加margin: 0，覆盖浏览器默认样式：

.list {
  padding: 0;
  margin: 0; /* 新增该行 */
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-start;
}

2. 可选优化：.item里的gap: 5px没有实际作用（每个<li>内无其他子元素），可以删除以精简代码：

.item {
  list-style: none;
  padding: 3.5px 10.1px 4.5px 13px;
  align-items: center;
  border-radius: 11px;
  background-color: #d5f5ff;
  width: max-content;
  font-size: 12px;
}

调整后所有标签会从父容器起始位置开始排列，换行后的标签也会和第一行标签左对齐。

内容的提问来源于stack exchange，提问作者Agustin R